CODEWITHSUNDEEP
htmlcsswordpress
nathandrake
nathandrake

Reputation: 427

Wordpress: Issue with Logo section not working properly

Currently my page looks like this: enter image description here

But when I scroll down, the background image of stars overlap the logo section as given below: enter image description here

This is how the site header css looks like: 

.site-header {
    position: relative;
    z-index: 1000;
    /*background-attachment: fixed; */
}

.site-header .home-link {
    color: #141412;
    display: block;
    margin: 0 auto;
    max-width: 1080px;
    height: 130px;
    padding: 0 20px;
    text-decoration: none;
    width: 100%;
}

.site-header .site-title:hover {
    text-decoration: underline;
}

.site-title {
    font-size: 60px;
    font-weight: bold;
    line-height: 1;
    margin: 0;
    padding: 58px 0 20px;
}

.site-description {
    font: 300 italic 24px "Source Sans Pro", Helvetica, sans-serif;
    margin: 0;
}

and this is how the star image is being formatted is currently setup:

body.page-id-72 #stars {
    background: #425169 url("../images/photos/stars.gif") top center;
    width: 100%;
    height: 8000px;
    position: fixed;
    top: 300px;
    z-index: 100;
}

I want the site titles background to stay white as it is shown in first image. Any help in this regard would be great

Upvotes: 0

Views: 63

Answers (2)

Omar Tariq
Omar Tariq

Reputation: 7724

Try writing this at the end of the css file:-

.site-header {
    background-color:#FFF;
}

If still doesn't work then try this:-

.site-header {
    background-color:#FFF !important; // !important is usually not recommended.
}

Upvotes: 1

CRABOLO
CRABOLO

Reputation: 8793

Just add this to your css. You currently don't have any background for .site-header, so when you scroll down, it takes the background of your div with the earth.

.site-header {
    background: white;
    z-index: 101; //you likely need to add this too, b.c you gave a z-index of 100 to the stars
}

if you don't want to change the .site-header on every page, just the one with the stars background, you can try

.page-id-72 .site-header {
    background: white;
    z-index: 101; //you likely need to add this too, b.c you gave a z-index of 100 to the stars
}

Upvotes: 1

Related Questions