Image being ignored from css reference

http://mindset.kirawagner.com/index2.html

images/background1.png in this code is being ignored but background2.png is fine. The css/custom.css contains the appropriate reference but why is just this one failing and the others work. The image doesn’t even show up on a firefox inspect so I’m confused.

help.

Hi, It would save me (and the next guy) time if you gave detailed info, like what element the background is applied to for example.

The class name it is targeting, (full-width-header) according to the CSS, is not in the html source.

I’ll be back when I find some more time. :slight_smile:

Sorry. If I understand you, the element should be shown on the html index2 page.

Here is the class source.

.full-width-header{
  background-color: #232323; 
  background-image: url(../images/background1.png); 
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; 
}
.full-width-background4 {
  background-image: url(../images/background4.png) !important; 
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
.full-width-background2{

  background-image: url(../images/background2.png); 
  background-repeat: no-repeat;
  background-size: cover;}
.center-image { display: block; margin-left: auto; margin-right: auto; }
.header-style { font-family:'Alex Brush', cursive; font-size: 100px; color: #477f8a; } 

the complete set is here:
http://mindset.kirawagner.com/css/custom.css

I don’t understand what else I can tell you about it.

Wat is the name of the image that is not being displayed and what text is nearby?

I can see that the image of a book is missing,“images/quick-preview.png”, but that’s all.

I can access all of the background images. And you don’t need the !important modifiers on background4.png

It maybe a browser cache problem which can be cleared with CTRL-F5

Try also to add dummy parameters to the image file name like

…/images/background1.png?parameter=test123

or specifically state the complete html path and not a relative path.

Edit:
Any reason why the over-ride kludge ! important has not been used but has been in quite a few other cases?

I wonder if the selector “.full-width-header” should be “.full-width-background1” instead. The div with the latter name has an html comment - header - at its start tag.

Please find the CSS “.full-width-header” ruleblock and rename its selector to “.full-width-background1” instead. Then the image should show.

1 Like

I don’t see “full-width-header” in your HTML. I do see:

  <!-- header -->
  <div class="full-width full-width-background1" style="color: #ffffff;">

and

  <!-- main content -->
    <!-- content 1 -->
    <div class="full-width" style="background: #ffffff;">
...
...
...
    </div>

    <div class="full-width full-width-background1" style="background: #ffffff; ">

It wouldn’t hurt to validate your HTML.

Well, you could have posted the css matching html snippet too. If you had found it. :wink:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.