Highlighted

CSS problem with background header image

New Here ,
May 03, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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.

TOPICS
Learn Dreamweaver

Views

339

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

CSS problem with background header image

New Here ,
May 03, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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.

TOPICS
Learn Dreamweaver

Views

340

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 03, 2018 0
Adobe Community Professional ,
May 03, 2018

Copy link to clipboard

Copied

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

<header id="header_carhartt">

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 03, 2018 1
New Here ,
May 03, 2018

Copy link to clipboard

Copied

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???

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 03, 2018 0
Adobe Community Professional ,
May 03, 2018

Copy link to clipboard

Copied

Then something else is amiss.

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 03, 2018 0
Adobe Community Professional ,
May 03, 2018

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 03, 2018 1
Community Beginner ,
May 04, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 04, 2018 0