Help- CSS header/background

[haliano]

Hello,
I am trying to get a full sized image (1128 px wide) as a header on Modern Blogger Pro- I really want the header image to be placed in the background box instead of the included header placement box because I want it to show BEHIND the email subscription widget in the header, and still be full size and responsive on mobile. I am not sure if this is possible, but hopefully you can help me!

Option 1- putting the header image in the background container, and not using the header container at all

The css for the background is this:

.site-container {
background: #fff url('images/hdot.png') repeat-x;
border: 10px solid #fff;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
margin: 20px auto;
max-width: 1168px;
}

I originally replaced the ('images/hdot.png') with my new header image, and removed the repeat, but when I went back to the site, the image repeated regardless, and broke the mobile version of the website.

Is there something I can add to make the image show only once and stay at the top of the container (leaving the rest of the background white)?

OR- the option 2

If I go back to trying to get the header to work, I revered the background to the way it was, only I removed the provided dot image to make it white, and then maybe change the header css.

It currently reads:

.header-image .site-title > a {
background-size: contain !important;
display: block;
height: 164px;
margin: 0 auto;
width: 360px;
text-indent: -9999px;
}

Can I change the height and width there to allow me to upload my large image (it currently forces you to load small, and crop the image to fit the 720/328 requirement). If I change the values in the CSS here will the image remain responsive for mobile? And, can I still get the subscription form widget to show on top of the image?

I don't know if either will work
I'm not terribly CSS savvy.....so.... help a girl out? Thanks!
(see site at http://www.onlypassionatecuriosity.com- right now I have option 2 halfway done)
(see the image I would *like* to use here )

http://www.onlypassionatecuriosity.com

[haliano]

Or perhaps I need to have the site call different images for desktop and mobile? (actually, I may have to do that ALSO once I figure out the desktop image, because this one is sized perfect to work with that widget the way I want, but the mobile version has the widget showing elsewhere instead of on/in the header)

[Author]

Posts