Forums

Background Image Not Loading

Permalink
So I know my file directory is linked to the right place as our logo has successfully loaded at two spots on our site, yet background-images won't load. Anyone know why this may be the case.
 
apc123 replied on at Permalink Reply
apc123
Can you send a link?

The cause of this could be anything from a permissions error to a mistaken URL in a CSS file to a MIME type flub.
bpbuild replied on at Permalink Reply
http://bmpbuild.com/concrete/
FischerVision replied on at Permalink Reply
FischerVision
Where did you assign your background image? As your CSS don't load a background image completely.
body {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

As all of the other content "fillings"
#Fitting3 {
    background-color: #FF0022;
    height: 100%;
    margin-top: 0;
    width: 100%;
    z-index: 2;
}
ConcreteOwl replied on at Permalink Reply
ConcreteOwl
@FischerVision
The Theme css link is between the html opening tag and the head opening tag?
bpbuild replied on at Permalink Reply
I was trying to associate the background image only with Fitting1, and then work down from there
mhawke replied on at Permalink Best Answer Reply 1 Attachment
mhawke
You've hard-coded the URL to the background image to the files directory rather than your theme directory. C5 is adding stuff to your URL. See attached.

Try this...

Put Desert.jpg into the same folder where main.css is and update the main.css to be

background-image:url('Desert.jpg');
background-size:cover;
bpbuild replied on at Permalink Reply
Worked like a charm. Thanks
mhawke replied on at Permalink Reply
mhawke
Also, you might want to place your 'Benchmark' png on the page by using a Content block rather than an Image block. That way you can set the width of the image to be 80% or so and the image will scale with the size of the screen. To do this, add a Content block and then add your logo png image to the content block. Then click on the image and click the icon on the toolbar the looks like a picture of a tree. Then choose the 'Appearance' tab and put 80% in for the width. Leave the height blank.
Now the image will re-size to fit smaller screens.
ConcreteOwl replied on at Permalink Reply
ConcreteOwl
Frankly
Your templates are a mess!
You have two empty lines before the Doctype declaration,
You have divs and uls inside the head section,
You have no opening body tag
etc etc..