CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ketan
ketan

Reputation: 19341

change logo in every div of my html page

I have 5 div, each below the other in a main container div. Each div has a different height(say, first one has height: 300px;, second one has height: 400px; and so on). Each of these div also has an alternative background color of black/white.

I have a logo, one variant is white color and the other is black color which I want at a fixed position when page scrolls(white logo on a black div and black logo on white div).

In my code I placed a black logo at top left corner. Now my problem starts here. When I scroll the page, the black logo is not visible on black div, the same would happen when I have a white div and white logo.

I want that the black div show the white logo and white div show a black logo when the page is scrolled. The position should be fixed.

This is my HTML:

<div class="wrapper">
    <img src="whiteLogo.png" style="position:fixed">
    <div class="first" style="background-color:#000"></div>
    <div class="second" style="background-color:#FFF"></div>
    <div class="thiree" style="background-color:#000"></div>
    <div class="four" style="background-color:#FFF"></div>
    <div class="five" style="background-color:#000"></div>
</div>

I created a JSfiddle: http://jsfiddle.net/ketan156/KqWQg/1/

Upvotes: 0

Views: 1672

Answers (3)

Fr0zenFyr
Fr0zenFyr

Reputation: 1929

Well try this using a simple CSS solution by keeping them fixed as you wanted.

HTML:

<div class="wrapper">
  <div class="first black" style="height:300px;"></div>
  <div class="second white" style="height:400px;"></div>
  <div class="thiree black" style="height:500px;"></div>
  <div class="four white" style="height:300px;"></div>
  <div class="five black" style="height:200px;"></div>
</div>

CSS:[sorry for image size mismatch, I guess you can handle that yourself.]

.black{
    background:#000 url(path/to/myWhiteLogo.png) no-repeat 10px 0px fixed;
}
.white{
    background:#FFF url(path/to/myBlackLogo.png) no-repeat 10px 0px fixed;
}

JSFiddle here.

Note: I used some random DIV sizes as suggested by OP. Also, use small images instead of loading huge images and resizing them, it will save bandwidth and load time.

Upvotes: 2

partypete25
partypete25

Reputation: 4413

One solution, and it's not the ideal solution you are after but it will make the logo visible on both backgrounds is to add a solid white stroke onto the logo image, in photoshop for example. Or if you prefer, you could add a black stroke to the white version of the logo.

Upvotes: 0

Asons
Asons

Reputation: 87191

Could this be a way:

CSS

.black_logo {
    background: url(Black-Logo-PNG.jpg) no-repeat top left;
    background-size: 50px
}

.white_logo {
    background: url(White-Logo-PNG.jpg) no-repeat top left;
    background-size: 50px
}

HTML

<div class="wrapper">
    <div class="first black_logo" style="background-color:#000; height:100px;"></div>
    <div class="second white_logo" style="background-color:#FFF; height:100px;"></div>
    <div class="thiree black_logo" style="background-color:#000; height:100px;"></div>
    <div class="four white_logo" style="background-color:#FFF; height:100px;"></div>
    <div class="five black_logo" style="background-color:#000; height:100px;"></div>
</div>

Note: And it's better to resize your logo to 50px instead of resize a big one using background-size: 50px

Upvotes: 1

Related Questions