Skip to main content
scottm357
scottm357
Participant
May 3, 2018 9:49 PM UTC
Answered

CSS problem with background header image

I have one background image on my home page that is set up in the css style sheet -

.header {

  text-align: center;

  /*background:url(../img/pw_maze_black_2X.png) left top repeat;*/

  /*background: url(../custom/thread-web-1.jpg) left top;*/

/*background: linear-gradient( rgba(255,255,255, 0.65), rgba(255,255,255, 0.65)), url('../custom/thread-web-1.jpg');*/

background: linear-gradient( rgba(0,0,0, 0.2), rgba(0,0,0, 0.2)), url('../custom/thread-web-1.jpg');

  background-size: cover;

  /*padding: 280px 0;*/

padding: 100px 0 250px;

}

I am looking to change the background image for a particular page and was told to add this code in the style sheet -

#header_carhartt { 

text-align: center;

  /*background:url(../img/pw_maze_black_2X.png) left top repeat;*/

  /*background: url(../custom/thread-web-1.jpg) left top;*/

/*background: linear-gradient( rgba(255,255,255, 0.65), rgba(255,255,255, 0.65)), url('../custom/carhartt-1.jpg');*/

background: linear-gradient( rgba(0,0,0, 0.2), rgba(0,0,0, 0.2)), url('../custom/carhartt-1.jpg');

  background-size: cover;

  /*padding: 280px 0;*/

padding: 100px 0 250px;

}

And then to add this code to that particular page following the "body" tag -

<div style="overflow:hidden;">

<header class="header" id="header_carhartt">

<!--header-start-->

<div class="container">

<figure class="logo animated fadeInDown delay-07s">

<a href="#">

<img src="custom/muellertime-zipper-white-letters.png" alt="">

</a>

</figure>

<h1 class="animated fadeInDown delay-07s">MuellerTime</h1>

<h2 class="animated fadeInDown delay-07s">Promotions & Apparel</h2>

<ul class="we-create animated fadeInUp delay-1s">

<li>Custom Embroidery, Screen Printing</li>

<li>& Advertising Specialties</li>

</ul>

<a class="link animated fadeInUp delay-1s" href="#embroidery" id="learn-more">Learn More</a>

</div>

</div>

</header>

I cannot get the image to change for page 2 no matter how many times I manipulate the tags, and I cannot find any help in the guide.

Can somebody PLEASE help me with this?  I only want to change my background image for a new page and still keep my original image on the main page.

Thanks in advance!!

Scott

This topic is closed to new replies. Start a new post to keep the conversation going.
BenPleysier
BenPleysierCorrect answer
Community Expert
May 4, 2018 1:03 AM UTC

What I would normally do is assign an ID to a page like

<body id="homepage">

Then use that ID as part of the selector like

#homepage .header {

     background:url(../img/pw_maze_black_2X.png) left top repeat;

}

This way you can assign a different image to each of your pages.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
View reply

5 replies

@KariSelovuo
Participant
May 4, 2018 10:40 AM UTC

I copied your code, tested it locally and it works with an easy fix.

The problem is with CSS selector specificity. ID rule is "stronger" than a class rule. Your code works as is, if your other page has the class .header and only the class - not the id="header_carhartt". And the other page has both the class and the id="header_carhartt".

As Ben suggested, using ID per page would be easier. Do not mix ids and classes randomly. Use CSS selector specificity and inheritance. All your CSS could have been written in a simple and logical manner which would prevent this kind of "errors".

I do not want to criticize you but I'm trying to show you the weak point in your coding style.

Translate
John Waller
Community Expert
John WallerCommunity Expert
Community Expert
May 3, 2018 10:25 PM UTC

Remove class="header" from your page 2 code.

<header id="header_carhartt">

Translate
scottm357
scottm357Author
Participant
May 3, 2018 10:51 PM UTC

Thanks, John but that did not solve the problem.  Now I get a blank white background and the text under my logo is left justified instead of centered under the logo.  I am still trying to put the image behind the logo as it is on my home page.

Any other ideas???

Translate
John Waller
Community Expert
John WallerCommunity Expert
Community Expert
May 4, 2018 12:57 AM UTC

Then something else is amiss.

Please post a URL to your website so we can see it in full and diagnose it accurately.

Translate
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices