@Kollyde (Cheyenne R) posted a new topic, subject "Can you make an image part of an ID?". It read:

   I know how to apply a class to an ID. That would be  
    And it would apply any properties of the ID to the image.
    
    But is there a way to add an image to an ID in CSS so that when I call it , the image is automatically included? For example it would _probably_ look something like
    [code] 
        #id-with-image {
           img src="https://imagelink.com"
        }
        
    [/code]
    
    And then I wouldn't need to use the `<img>` element in HTML. Hope this makes sense.

After which, @Sky020 (Shaun Hamilton) added

    Welcome, Kollyde.
    
    I think you are wanting this: CSS background property (w3schools.com)
    
    Essentially, just use the `url` function in CSS to specify the background.
    
    TO ADD: Here is a lesson with some info: Learn Applied Visual Design: Create Texture by Adding a Subtle Pattern as a Background Image | freeCodeCamp.org
    
    Hope this helps

To which @cherylm replied

    Hi and welcome to the forum,
    
    `img src` doesn't mean anything in CSS, so that won't work.
    
    You can add a background image like so:
    [code] 
        #id-with-img {
        background-image: url("https://imagelink.com")
        }
        
    [/code]
    
    Does that help?

@Kollyde (Cheyenne R) replied

    Thank you. And yes I do mean like that, except as a standard image and not a background image. For context I am making a header for a page and the user story states that header must have an id of id=“header”. I'm trying to see if there's a way I can put the image information in the #header id in CSS instead of the ordinary way in HTML. Not sure if this is possible or not.

So @Kollyde (Cheyenne R) replied

    Thank you. My response is the above post.

After which, @cherylm added

    I could be mistaken, but as far as I know, you generally add the images in the html. So in the html, you have something like this:
    [code] 
        <header id ="header">
        <img src="https://imagelink.com" />
        </header>
        
    [/code]
    
    Then, you can make the image responsive, and position and style the image with CSS. Of course, if you want the image to cover the entire header area, you can use the background property Sky020 and I mentioned above.

@DanCouper (Dan Couper) replied

    CSS is for adding style to HTML, that's all, it's not for creating HTML.

@system (system) replied

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


{'source': 'discourse', 'url': 'https://forum.freecodecamp.org/t/can-you-make-an-image-part-of-an-id/439609', 'title': 'Can you make an image part of an ID?', 'views': 215, 'has_accepted_answer': True, 'word_count': 402, 'like_count': 2, 'reply_count': 3, 'participant_count': 4, 'posts': 8, 'tags': '', 'author': '@Kollyde (Cheyenne R)', 'participants': '@Kollyde (Cheyenne R), @Sky020 (Shaun Hamilton), @cherylm, @DanCouper (Dan Couper), @system (system)', 'image_url': [None], 'created_at': '2021-01-09T00:42:45.918Z', 'last_posted_at': '2021-07-10T15:04:47.391Z'}