Change to background image.


Joined
Oct 30, 2018
Messages
8
Reaction score
0
<td rowspan="4">
<img src="images/Equalizer_34.png" width="61" height="282" alt=""></td>
<td colspan="11"><img src="images/Equalizer_35.png" width="439" height="181" alt=""></td>
<td rowspan="4">
<img src="images/Equalizer_36.png" width="64" height="282" alt=""></td>
<td>
Untitled-1.png


How do I make this into a background image? its this image I want to turn into the back ground image Equalizer_35.png
 
Ad

Advertisements

Joined
May 8, 2016
Messages
4
Reaction score
0
firstly, remove the table! tables are not for layout design.

Do you want the image to be full screen to the viewport?
Add a css class
Code:
header {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background: url(./images/Equalizer_35.png) no-repeat center center scroll; /* This is the location of your image */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

And add to your css the header tag
Code:
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./content/site.css"> <!-- link to your stylesheet -->
   
    <title>Hello World</title>
</head>
<body>
    <header></header>
</body>
</html>
 
Last edited:
Joined
Oct 30, 2018
Messages
8
Reaction score
0
Thanks for your help I did manged to do it, my website looks good in chrome, not so good in IE I will try your way as well ,as my way is a bit bodged.
 
Joined
Oct 30, 2018
Messages
8
Reaction score
0
I don,t have dreamweaver open at the moment but I could show you the code I know it's not right, but I got it to work.
Am on my tablet so maybe in morning I will jump on desktop and open it up
 
Joined
Jul 12, 2019
Messages
3
Reaction score
0
My popint of you you have toi try this one for HTML :

HTML Code:
<html>
<body background="bgimage.jpg">
<h1>Hello world!</h1>
<p><a href="https://www.w3schools.com">Visit W3Schools.com!</a></p>
</body>
</html>

CSS Code :
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: scroll;
}
 
Ad

Advertisements

Joined
Jul 15, 2019
Messages
11
Reaction score
0
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

.hero-image {
background-image: url("/w3images/photographer.jpg");
background-color: #cccccc;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
</style>
</head>
<body>

<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:30px">Text over background image</h1>
</div>
</div>

</body>
</html>
 
Ad

Advertisements


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top