Multiple Background in CSS

hi, I am trying to insert a multiple css background in a cover landing page but I somehow get both images to full with. Basically, I am trying to get the first background to cover, while getting the second background positioned right middle and responsive.
body{
background:
url(2nd.png) no-repeat right , ----------> But i want this100% responsive and to the right
url(1st.png) no-repeat left top; ---------> This covers OK
background-size: cover;
With the code above I get the 1st.png to cover bu alsot the 2nd.png covering the whole page too, which is not what i am looking for.
Many thanks!l

You have not given enough information about the images (the actual size of each) and the container in which they are to fit to know whether the second one will work as desired or not.

Try reading about the various values used to set the background-size and see if one of them might work for you. You can experiment with them, too.
http://www.w3schools.com/cssref/css3_pr_background-size.asp

You will have use two background-size values and separate them with a comma like you did the images.

If you need to more help, please create a CodePen or a “working page” that demonstrates the problem.

you can give a try to : http://www.w3schools.com/css/css3_backgrounds.asp

hello again, first thanks to ronpat and timoykhan. this is similar to what I am trying to create in here. here i would like to keep the penguin image to the right to a relatively smaller size and responsive.
thank you again.

Hi there moisea,

try it like this…

[code]

untitled document html,body { height:100%; margin:0; } body{ background-color:#333; background-image: url(http://www191.lunapic.com/do-not-link-here-use-hosting-instead/145486368274594?8471631548), url(http://coolblackppt.com/wp-content/uploads/2013/07/Black-hole-1400x1050-pixels-wallpapers-tagged-background-patterns.jpg); background-repeat:no-repeat; background-position:right 50px,center top; background-size:50% auto,cover; background-attachment:fixed; } h1{ margin-top:0; padding-top:1em; } h1,h3 { color:#fff; text-align:center; }

Something

Some description

[/code]

coothead

2 Likes

thanks coothead, works fine . You’re awesome! just need to tweak the positioning of the penguin a bit. but great! thank you again.

No problem, you’re very welcome. :sunglasses:

coothead

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.