CODEWITHSUNDEEP
html
DrJessop
DrJessop

Reputation: 472

HTML/CSS Making a Link a Background Image

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?

Upvotes: 0

Views: 4346

Answers (2)

Ilmari Karonen
Ilmari Karonen

Reputation: 50338

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.

Upvotes: 1

Bitz
Bitz

Reputation: 1148

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;
}

Upvotes: 0

Related Questions