[Bethann]

I am wondering how to accomplish my goal of a balanced header. 2 images in the header background that will separate when viewed on smaller devices. Either by one image…that is fixed on the right hand side of the page and is of 500px or less and the other left image being put in as the logo image….or something. Please view my question which is fully explained at this link showing visual images of what I am asking for. http://192.185.142.81/~rawhideo/design-question/ Thanks so much

[Sakin]

@Bethann: The best option will be to create 3 images.
1. Just the png logo
2. Top Left corner blue/white gradient image
3. Bottom Right corner blue/white gradient image

Then you can upload the logo and then add the following css in “Appearance => Theme Options => Custom CSS” box for 2 gradient images.

#masthead {
    background: url("TopLeftImageURL") no-repeat scroll left top transparent;
}
#hgroup-wrap {
    background: url("BottomRightImageURL") no-repeat scroll right bottom transparent;
}

[Bethann]

I’m so excited that this is a possibility. However, I am doing something wrong. I uploaded a png image. Then I added the code, but nothing changed. I tried a couple of different ways.
#masthead {
background: url(“http://192.185.142.81/~rawhideo/wp-content/uploads/top-left1.jpg”;) no-repeat scroll left top transparent;
}
#hgroup-wrap {
background: url(“http://192.185.142.81/~rawhideo/wp-content/uploads/bottom-right1.jpg”;) no-repeat scroll right bottom transparent;
}

and

#masthead {
background: url("http://192.185.142.81/~rawhideo/wp-content/uploads/top-left1.jpg") no-repeat scroll left top transparent;
}
#hgroup-wrap {
background: url("http://192.185.142.81/~rawhideo/wp-content/uploads/bottom-right.jpg") no-repeat scroll right bottom transparent;
}

and

#masthead {
background: url(;”http://192.185.142.81/~rawhideo/wp-content/uploads/top-left1.jpg”;) no-repeat scroll left top transparent;
}
#hgroup-wrap {
background: url(;”http://192.185.142.81/~rawhideo/wp-content/uploads/bottom-right1.jpg”;) no-repeat scroll right bottom transparent;
}

What am I missing?
Thanks for your help!

[Sakin]

@Bethann: I just check in your custom css and found the following code:

#masthead {
    background: url(;"http://192.185.142.81/~rawhideo/wp-content/uploads/top-left1.jpg";) no-repeat scroll left top transparent;
}
#hgroup-wrap {
    background: url(;"http://192.185.142.81/~rawhideo/wp-content/uploads/bottom-right1.jpg";) no-repeat scroll right bottom transparent;
}

In the above code that you have added has extra ;. So, the code should be as below:

#masthead {
    background: url("http://192.185.142.81/~rawhideo/wp-content/uploads/top-left1.jpg") no-repeat scroll left top transparent;
}
#hgroup-wrap {
    background: url("http://192.185.142.81/~rawhideo/wp-content/uploads/bottom-right1.jpg") no-repeat scroll right bottom transparent;
}

[Bethann]

Bless you…works perfectly….Can’t say enough how great support is!

[Sakin]

@Bethann: Thanks for your appreciation.

[Author]

Posts