Change to background image.

gregsta · Dec 18, 2018

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

Exodus_AU · Dec 18, 2018

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>

gregsta · Dec 18, 2018

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.

gregsta · Dec 18, 2018

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

sagar.chavada · Jul 26, 2019

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

shaili shah · Sep 19, 2019

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

Put image over the top of another image on hover	3	Feb 7, 2020
Image not changing between "mute" & "un-mute" images.	5	Jun 2, 2023
HTML Aligning social media icons	2	Dec 6, 2020
Help with Visual Lightbox: Scripts	2	May 3, 2023
Flip-Cards with Local Images	1	Mar 27, 2023
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Help with my responsive home page	2	Dec 14, 2022
SendGrid email issue in responsive Gmail	1	Nov 4, 2021

Change to background image.

gregsta

Exodus_AU

gregsta

gregsta

sagar.chavada

shaili shah

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads