How to move background-image code from .css file to .html file?

[marktravis]

So, I want to move code for the background image from .css to .html file. When I do that, the image is not shown on my website.

When I use the following code, the image (item.png) is shown correctly:

http://codepen.io/anon/pen/KVjqjj

However I want to use the following code, but when I do that, the image is not showing. Here is the code:

http://codepen.io/anon/pen/eJwRqN

My folder structure looks like this, so I am sure I didn’t make any mistake regarding path of the image:
index.html
style.css
/img

[Shikkediel]

With the second pen you’re setting the image on the parent div which has no height because of absolute positioning (so nothing there to show the background)…

[marktravis]

Thank you very much for the answer! Can you please help me how to solve it? Which code should I add or remove?

[Shikkediel]

I don’t think you really need position: absolute on the select element at all?

[marktravis]

When I remove that, the same image appears over 10 times on the places where it shouldn’t be. :/ Any other solutions?

[Shikkediel]

Not really, other than giving the parent a fixed height.

When I remove that, the same image appears over 10 times on the places where it shouldn’t be.

Not sure what that means, the demos would be a lot more useful if they had actual images…

[marktravis]

Here is a screenshot: http://imgur.com/BD5dNoC

[Shikkediel]

I think you’d have to inline some of the other background properties for that as well. That particular one would be background-repeat: no-repeat. You could do a shorthand version by the way :

style="background: url(img/item.png) 482px -2px no-repeat;"

Note that the child element isn’t actually positioned inside the resource_select div until that has been given position: relative. At the moment it’s position will be related to body.

[marktravis]

Thanks for all the help! But, no matter what I do, it won’t work. Would you mind giving me your email so I can send you full source code so you can take a look into it? That would help me a lot.

[Shikkediel]

No need for that I think, reading the plain code is a lot less useful than a live link or demo…

Maybe you could explain why you’d like to do this at all. Inline style isn’t really preferred.

I suspect a pseudo element might fit the needs better.

[marktravis]

So, I’m planning to use the .html code for a lot of single niche sites uploaded under same domain. All of the single niche sites would use only one .css file, so it would be really hard for me to change .css for every site. That’s why I wanted to do this but I can’t make it to work. I don’t know if I explained it correctly, but I hope you figured out what I mean.

[Shikkediel]

From what I understand, it might be a better approach to create two stylesheets then – a common and individual one. What I don’t get is why the background would have to move from the select element to the parent div for it.

Here’s something to work with by the way :

Pen

[marktravis]

The reason why I want to move image part from .css to .html it is this:

http://codepen.io/anon/pen/WrqmKg

If I’m unable to do this, it means that I need to create 3 items in .css file where I will post different image.

[Author]

Posts