HTML/CSS Making a Link a Background Image

Question

I have tried looking up several ways to make my specific image the background of a webpage, but it hasn't worked. I tried

<style>
body {
    background-image: url("ice_dna.jpg");
background-repeat: no-repeat;
}
</style>

to no avail. I even tried

<body background="File:Ice-Binding-DNA--.jpeg">
<p><a href="http://*LINK*"</a></p>
</body>

But this just made the background into a link to the image... I tried making the background just the link, but that didn't work either. The only way I can display the image is as img src="...". Is there a way to make that image source into the background?

Most likely, the problem is that the image URL isn't pointing to where the image actually is. Relative URLs can be tricky like that; you might want to try using the full URL of the image and see if that helps. But without a testable example, we can really only guess. — Ilmari Karonen
– Ilmari Karonen, Commented Aug 24, 2017 at 16:35
That's the thing, I can't give you guys the link to this :/ I can't use images stored on my computer for this project, they are all on a type of registry. When you're saying use the full URL, are you saying to use to webpage URL? — DrJessop
– DrJessop, Commented Aug 24, 2017 at 16:39

Ilmari Karonen · Accepted Answer · 2017-08-24 17:02:18Z

If you can display the image using <img src="...">, then there shouldn't be anything wrong with the image itself. Your CSS also looks good to me. Indeed, it works just fine in a snippet like this:

body {
    background-image: url("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png");
    background-repeat: no-repeat;
}

Since you say that you're using an inline <style> element for your CSS, the problem can't even be caused by relative URLs (which, in an external style sheet, would get resolved relative to the location of the style sheet rather than the location of the HTML page).

Thus, I'm forced to conclude that your problem cannot be reproduced as described, and must be caused by something that you have not described in your question. I have therefore voted to close your question, as any answers to it at this point would have to be pure guesswork.

^{Ps. This really should have been a comment, but one can't include snippets in a comment. I've instead marked this answer as Community Wiki, so that I won't get any rep from up/down votes to it.}

Bitz · Accepted Answer · 2017-08-24 16:35:34Z

0

You would need to make the page itself "full height". By default, it has no height. And then you should be able to apply your background:

body, html {
    height: 100%;
}
body { 
    background-image: url("img_girl.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

answered Aug 24, 2017 at 16:35

Bitz

1,14813 silver badges39 bronze badges

7 Comments

DrJessop Over a year ago

Would I be able to use the URL of the webpage that stores the image? If not, is there a way that I can do that?

Bitz Over a year ago

Yes, lets say you have an image like http://i.imgur.com/HlmWDMU.jpg, you can link to it like so: background-image: url("http://i.imgur.com/HlmWDMU.jpg");

DrJessop Over a year ago

That's weird then... instead of making a background image, all of this just showed up as text on the screen... I don't know HTML nor CSS at all, so would I have to declare that I am changing my code to CSS before I do this?

Bitz Over a year ago

I should have mentioned that the code i listed here should go in your <style> tags. Sorry! I assumed that was obvious. :P

DrJessop Over a year ago

Okay, I just did the style thing and the text went away, but the image is still not on the screen

|

Collectives™ on Stack Overflow

HTML/CSS Making a Link a Background Image

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related