PDA

View Full Version : Images in browser preview


Thelawman
04-19-2014, 09:52 PM
This may have been asked already but I searched and could not find anything.
When I choose browser preview, all my HTML and CSS styles show up, but none of my images used in css "background-images" show up. I have gone through the preferences and made sure my browser is using temp files.

edbr
04-20-2014, 03:52 AM
made sure my browser is using temp files.
not sure what you mean.
i would say the paths are wrong to the images try absolute or /images/.... or ../images even . all guesses as you didnt post your code

Thelawman
04-20-2014, 03:30 PM
Sorry, I should have posted my code:
Here is the link to my css:
<link rel="stylesheet" class="text/css" href="Stylesheets/main.css" />
Here is part of my css:
div#page1.section {
width:100%;
Height:100%;
min-width:400px;
min-height:400px;
background-image:url(../Images/P1.jpg);
background-repeat:no-repeat;
background-size:100%;
background-color:#000;
margin:-8px 0px 0px -8px;
position:absolute;
z-index:1;
}
so every part of this works except the image doesn't show up...which if I copy and paste this in notepad ++ it works just fine.

Ricky55
04-20-2014, 06:47 PM
Remove the background colour line.

Thelawman
04-20-2014, 07:13 PM
Deleted the background-color line....still nothing...none of my images show in browser preview..I can see them all in design view. I can see all my HTML elements (minus images) and see all of my CSS styles (minus background images)

Ricky55
04-20-2014, 09:27 PM
Try increasing the z index to 1000.

If this doesn't work link your HTML and I have a proper look just on my iPad at the min.

edbr
04-21-2014, 02:18 AM
just to state the obvious, the remote file has folders Stylesheets and Images not stylesheets and images

Thelawman
04-21-2014, 03:06 PM
I do have a separate "stylesheets" folder where I keep my .css files
, as well as, an images folder. Why did you say "to state the obvious"? Is there an issue with keeping .css and images in separate folders?

I tried the z-index thing. I'm starting to wonder if it's just dreamweaver, as the z-index did not work. After changing it back, some not all, of my html objects are now missing in browser preview (all i I did was change the z-index to 1000 and back). Everything looks great in design view, but it is quite challenging without knowing what it looks like in a browser. I created another folder and just copy and pasted my dreamweaver code into notepad++ opened the html file in chrome and it looks great.

Thelawman
04-21-2014, 03:11 PM
<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<title>Title</title>

<!-- Stylesheets -->
<link rel="stylesheet" class="text/css" href="Stylesheets/main.css" />


</head>

<body>
<div id="container">
<div id="page1" class="section">
<div id="header">
<div id="icon">
<a>
<span class="icon">
<img src="Images/menu_ico.png" />
</span>
<span>MENU</span>
</a>
</div>
<div id="location">
<h2>Welcome to Courtwright</h2>
</div>
<div class="logo">
<a href=""><img src="Images/LogoV.2.png" alt=""></a>
</div>
</div>
</div>
</div>
</body>
</html>

Ricky55
04-21-2014, 11:21 PM
Dreamweaver won't have any affect if you are previewing in the browser.

If you open the site files in chrome and the images are viewing there's not a problem. Have you tried emptying your cache and then using the preview in browser feature?

CSS and images are best kept in separate folders.

By the way your selector is way too specific you don't need and shouldn't select things by id tag and class, just use .section

If you still suspect that there's a problem zip the folder and email it to me and I'll check it in the morning too late now.

richard@qwerty-design.co.uk

Cheers

edbr
04-22-2014, 02:58 AM
i just meant the use of capital letters and that they match i the path