Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #238242
    marktravis
    Participant

    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

    #238267
    Shikkediel
    Participant

    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)…

    #238270
    marktravis
    Participant

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

    #238273
    Shikkediel
    Participant

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

    #238274
    marktravis
    Participant

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

    #238275
    Shikkediel
    Participant

    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…

    #238284
    marktravis
    Participant

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

    #238285
    Shikkediel
    Participant

    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.

    #238286
    marktravis
    Participant

    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.

    #238287
    Shikkediel
    Participant

    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.

    #238288
    marktravis
    Participant

    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.

    #238292
    Shikkediel
    Participant

    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

    #238293
    marktravis
    Participant

    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.

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.