-
Sep 25th, 2018, 11:46 AM
#1
Thread Starter
PowerPoster
Background image won't show?
I have a webpage in which I use a background-image. Problem is that it's not showing and I've done everything I know to do and it still doesn't appear. Below is my code which seems to be obvious. But I'm definitely missing something. I've tried clearing the cache. The webpage uses PHP and I'm using Brackets as my editor.
The location of the image has been triple-checked.
Code:
body {
width: 100%;
height: 100%;
padding: 0;
background-image: url("images/marble-2362262_640.jpg");
background-repeat: no-repeat;
background-size: cover;
font-family: Arial, Helvetica;
}
HTML code.
Code:
<link rel="stylesheet" href="css/styles2.css">
Thanks,
-
Sep 25th, 2018, 02:00 PM
#2
Re: Background image won't show?
That works with a basic page for me in IE 11, Chrome, and Firefox.
If you open the network tab in your browser and reload the page, is it giving a 404 for anything?
-
Sep 25th, 2018, 02:02 PM
#3
Thread Starter
PowerPoster
Re: Background image won't show?
Network Tab? I'm using Chrome and I don't see what you are referring to...
-
Sep 25th, 2018, 02:03 PM
#4
Re: Background image won't show?
Using the debugger in the browser itself should show you the issue - error on file path or some CSS issue that's causing the problem.
-
Sep 25th, 2018, 02:33 PM
#5
Thread Starter
PowerPoster
Re: Background image won't show?
Yes...it did actually but it wasn't on CSS. It was on a <script> tag at the bottom of my HTML. It looked just like this: <script> and nothing else. I inserted "type=text/javascript" and the 404 went away. However, my background-image still isn't showing up.
-
Sep 25th, 2018, 02:52 PM
#6
Re: Background image won't show?
If you right click the page and select "Inspect"and then open the "Elements" tab and click on the "body" tag, does it show that it is loading your background image?
-
Sep 25th, 2018, 03:03 PM
#7
Thread Starter
PowerPoster
Re: Background image won't show?
No...I don't see anything in the <body> tag that should be loading the image but that style is in css/styles2.css file location. See below.
Code:
<head lang="en">
<title>Test Page</title>
<meta name="description" content="Some meaningful content describing the site.">
<link rel="stylesheet" href="css/styles2.css">
<script type="text/javascript" src="scripts/resume_scripts.js"></script>
</head>
-
Sep 25th, 2018, 03:03 PM
#8
Thread Starter
PowerPoster
Re: Background image won't show?
No...I don't see anything in the <body> tag that should be loading the image but that style is in css/styles2.css file location. See below.
Code:
<head lang="en">
<title>Test Page</title>
<meta name="description" content="Some meaningful content describing the site.">
<link rel="stylesheet" href="css/styles2.css">
<script type="text/javascript" src="scripts/resume_scripts.js"></script>
</head>
-
Sep 25th, 2018, 03:43 PM
#9
Re: Background image won't show?
It wouldn't be in the body... it's in the css... do the rest of the styles show up?
eeeeh.... try this:
Code:
body {
width: 100%;
height: 100%;
padding: 0;
background-image: url("/images/marble-2362262_640.jpg");
background-repeat: no-repeat;
background-size: cover;
font-family: Arial, Helvetica;
}
Put a leading / on the front of the URIL for your image... it might be that it's trying to find it relative to the CSS file, which is in a CSS sub folder... that'll force it back to the images folder in the root.
-tg
-
Sep 25th, 2018, 04:56 PM
#10
Thread Starter
PowerPoster
Re: Background image won't show?
Tech,
I already tried what your suggesting and that did not work. As to your second question...not all of the styles are working...which lead me to think that there was a syntax error in one or more of the styles. I went through each style with a fine tooth comb and couldn't find anything.
-
Sep 25th, 2018, 05:51 PM
#11
Re: Background image won't show?
At that point, I'd disable all styles, and add them back in one at a time, or in small chunks, making sure they work, until they don't...
Not sure what else to suggest... debugging css can suck sometimes.
-tg
-
Sep 25th, 2018, 08:49 PM
#12
Thread Starter
PowerPoster
Re: Background image won't show?
Yeah, that's kinda what I was thinking of doing next!
-
Sep 26th, 2018, 07:05 AM
#13
Re: Background image won't show?
I meant inspect the body element and check the styles via Chrome's developer tools.
It will show you the styles actually being applied and if anything is overwriting your background.
-
Sep 26th, 2018, 10:36 AM
#14
Thread Starter
PowerPoster
Re: Background image won't show?
kfcSmitty,
Based on what you image looks like my styles don't look like they're being loaded. I don't see anything like what your image represents. I don't see a list of styles. Yet, there are some styles still being applied. It really doesn't make sense to me.
-
Sep 26th, 2018, 10:37 AM
#15
Thread Starter
PowerPoster
Re: Background image won't show?
kfcSmitty,
Based on what you image looks like my styles don't look like they're being loaded. I don't see anything like what your image represents. I don't see a list of styles. Yet, there are some styles still being applied. It really doesn't make sense to me.
-
Sep 26th, 2018, 11:20 AM
#16
Re: Background image won't show?
If you open your CSS file via the browser, does it have the changes you expect? COuld be the CSS file is cached by the browser.
If you open the full URL of the CSS file in the browser and it doesn't have your changes, try Ctrl + F5, or you can set developer tools to always load the page without cache as long as it is open.
-
Sep 26th, 2018, 11:32 AM
#17
Thread Starter
PowerPoster
Re: Background image won't show?
I've done CTRL+F5 several times. I'm not real savvy using the Chrome Developer tool. I'm sure if I knew it better, I would have figured this out by now. How can I set the page without cache in the developer tools?
-
Sep 26th, 2018, 11:40 AM
#18
Re: Background image won't show?
Originally Posted by blakemckenna
Based on what you image looks like my styles don't look like they're being loaded. I don't see anything like what your image represents. I don't see a list of styles. Yet, there are some styles still being applied. It really doesn't make sense to me.
Perhaps you should post a relevant image of what you do see.
Anyway, are any errors reported in the Console tab (right of Elements tab)?
If you drill down in the Sources tab (right of Console), do you find styles2.css listed and does it have the correct data shown?
-
Sep 26th, 2018, 11:46 AM
#19
Thread Starter
PowerPoster
Re: Background image won't show?
I still seem to getting the 404 error and it's on the background image file.
One thing I just saw in the developer tools. I was in the "Sources" tab and it showed the file structure of my app under localhost. I have an "Images" subdirectory and the background image (marble-2362262_640.jpg) wasn't in the directory but when I check the directory through windows explorer...it's there! What does that mean?
-
Sep 26th, 2018, 12:06 PM
#20
Re: Background image won't show?
I would suspect your Images directory isn't on the proper level as tg alluded to in post #9. To remove any confusion perhaps you should reference the image by the absolute path for now instead of relative path as you have. Once you see the page looks like it should, then you can try to figure out the correct relative path for the image. You may need to have .. before the \ for example. Hard to say since we don't know what your directory structure looks like.
-
Sep 26th, 2018, 12:18 PM
#21
Re: Background image won't show?
Trying to extrapolate your structure, using what you had in your OP, it would need to look like this:
Code:
test.html (or whatever you name this page)
css
--- styles2.css
--- images
------ marble-2362262_640.jpg
I'm betting that it really looks like this:
Code:
test.html (or whatever you name this page)
css
--- styles2.css
images
--- marble-2362262_640.jpg
If that's true, either move the images folder under css or change the path to this
background-image: url("../images/marble-2362262_640.jpg");
Last edited by topshot; Sep 26th, 2018 at 12:23 PM.
-
Sep 26th, 2018, 12:59 PM
#22
Thread Starter
PowerPoster
Re: Background image won't show?
topshot,
Your correct. That does show my background-image now. Thank you!
-
Sep 26th, 2018, 01:02 PM
#23
Thread Starter
PowerPoster
Re: Background image won't show?
topshot,
Your correct. That does show my background-image now. Thank you! But now I think the reason all of the styles aren't showing up is because of my iframe. Does my iframe have to access the same "styles2.css" file? If so, how do I do that?
-
Sep 26th, 2018, 01:20 PM
#24
Thread Starter
PowerPoster
Re: Background image won't show?
This site is acting weird. My replies seem to be getting posted twice!
-
Sep 26th, 2018, 02:08 PM
#25
Re: Background image won't show?
Originally Posted by blakemckenna
Does my iframe have to access the same "styles2.css" file? If so, how do I do that?
Yes. It is just another HTML file so the same link tag you used in the original HTML file.
-
Sep 26th, 2018, 05:30 PM
#26
Thread Starter
PowerPoster
Re: Background image won't show?
Where do I put the <link> tag? Does it go in the pages that will be viewed in the IFrame?
-
Sep 27th, 2018, 07:26 AM
#27
Re: Background image won't show?
Yes. I have always treated pages in an iframe exactly like those that aren't so they are fully HTML compliant as if they were on their own.
-
Sep 27th, 2018, 10:15 AM
#28
Thread Starter
PowerPoster
Re: Background image won't show?
I actually did this before you sent this post and you are definitely right. Just need to iron out some things but things are starting to fall back into place!
Thanks for your input!
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|