Adding additional images to CSS background

Question

I'm attempting to add three social media icons through CSS. The company logo was added to the website through CSS (images/logo.png).

I've attempted extensions by adding commas, but that causes the entire logo to disappear.

Any CSS advice here would be greatly appreciated.

Update

The "duplicate" in question didn't address the position overlap issue I was having.

The multiple images issue is now resolved. The only issue I'm running into now is applying individual links to each social media button. Any advice?

#heading h1 {
    text-align: left;
    font-weight: normal;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    height: 92px;
    background:#396ba5 url(images/logo.png) no-repeat 495px 0px;
}

`I've attempted extensions by adding commas` Where is it? Show what you've tried please. — Hashem Qolami, Sep 09 '14 at 15:59

score 0 · Answer 1 · answered Sep 09 '14 at 15:59

I don't know why it is not working.

compare your code with this

background: 
   url(images/logo.png) 496px 0px no-repeat,  
   url(thingy.png) 10px 10px no-repeat,   
   url(Paper-4.png);

or

background-image: url(images/logo.png), url(ribbon.png), url(old_paper.jpg);
background-repeat: no-repeat;
background-position: left top, right bottom, left top;

or

background: url(images/logo.png) left top no-repeat, url(ribbon.png) right bottom no-repeat, url(old_paper.jpg) left top no-repeat;

The placement of the icons is now the current concern, seems to be getting closer — adamuiowa, Sep 09 '14 at 16:30

score 0 · Accepted Answer · edited May 23 '17 at 11:57

0

Your current background has a colour specified in addition to the background images. In this case, the colour needs to be the last background specified. Only the last background can include a background color. Something like this should work:

#heading h1 {
    text-align: left;
    font-weight: normal;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    height: 92px;
    background: url(images/logo.png) no-repeat 495px 0px,
                url(images/twitter.png) no-repeat 495px 50px,
                url(images/facebook.png) no-repeat 545px 50px,
                url(images/facebook.png) no-repeat 545px 50px,
                #396ba5;
}

Related: https://stackoverflow.com/a/5427455/1590962

edited May 23 '17 at 11:57

Community

1
1

answered Sep 09 '14 at 16:15

cjol

1,485
11
26

That looks to have started something, but it ended up replacing the #396ba5 and causing a repeat of the first social media icon. – adamuiowa Sep 09 '14 at 16:24
I may have made a copy and pasting error with extra commas (which I've now removed). If you show me your CSS I might be able to tell you the problem. – cjol Sep 09 '14 at 16:27
Here is the CSS, the icons are now getting pushed behind the logo.png: http://jsfiddle.net/xy4hvg3p/ – adamuiowa Sep 09 '14 at 16:32
This seems to work for me (all I've done is replaced the URLs so they actually display something): http://jsfiddle.net/hephistocles/f35hbxbw/1 In response to your edit - the background rendering order can be changed by changing the order of the backgrounds in the CSS. The first image in the CSS is rendered at the top. – cjol Sep 09 '14 at 16:36
The latest edit is working better. However, it is now aligning everything (including main logo) to the left with the main logo over the top of the social media icons. Is it just a matter of adding a position code for each to fix this? - I should add my goal is to have the logo on the left and the icons to the right of the logo – adamuiowa Sep 09 '14 at 16:41
Fixed! Just had to add the previously set widths. Now a dumb question - how can I add link code in the CSS for each individual social media icon? – adamuiowa Sep 09 '14 at 17:01

Adding additional images to CSS background

2 Answers2