Cool i have an Answer
Add this Bit of code
To your CSS
Noting That all Things with the Tag body will have this Image Behind it
so you should place all your Website code Between A Body tag one at the top and one at the Bottom if you want it to Cover the whole page
body {
background-image: url("Image.jpg");
}
Here is an Example Piece of HTML Code for Reference
<!DOCTYPE html>
<html lang="en">
<html>
<body>
<p1>This is a Test<div>
You should see a Background Image</div>
</p1>
</body>
</html>
Let me know if it works for you
and also i hope i helped
Reference for extra information: https://www.w3schools.com/css/css_background_image.asp
I’m writing a site and trying to get HTML 5, CSS and JavaScript to get the site going and have an image manipulation problem. I want the image to be background but everything I try and there’s no div, etc. overlay.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="attributes.css">
</head>
<body>
<!-- page bar header navigation tabs -->
<div class="head_bg">
<div class="wrap">
<div class="logo">
<a href="index.html">
<img src="file:///C:/Develop/CodeSamples/manage-landing-page-master/images/logo.svg">
</img>
<div class="banner" id="move-top">
<img id="circular_clip" src="file:///C:/Develop/CodeSamples/manage-landing-page-master/images/bg-tablet-pattern.svg"></img>
</div>
</a>
</div>
</div>
</div>
CSS
div.banner {
width: 780px;
margin-top: 0px;
margin-left: 800px;
}
.head_bg {
margin-top: 25px;
}
#circular_clip {
position: absolute;
clip: rect(0, 100px, 200px, 0);
}
.banner {
background-position: -20px 0px;
/* clip:rect(500px,50px,500px,0px); */
}
.menu-left {
text-align: right;
}
.logo {
margin-top: 15px;
padding: 4px 4px 4px 4px;
}
.menu_head_banner a {
active: true;
}
.wrap {
margin: 0px auto;
}
.header_row_tabs a li ul {
margin-top: 15px;
float: center;
font-size: medium;
font-family: 'Lato', sans-serif;
padding: 33px 15px;
display: block;
text-align:center;
align-items: right;
}
.header_top_background li {
font-size: large;
padding: 0.45em 1em 0.55em 1em;
background: #EB6841;
float: right;
border-bottom: 5px solid #BA3A14;
border-right: 5px solid #CD542F;
}
I would like the bg-tablet-pattern.svg as the background using
.banner{ background-image:url();} and then background:url(); and style in the HTML thinking if the CSS is there it will see I want the image in the background. I know the image is correct because I can see it but I want it to across the page from right to left with the position having it cover the corner of the page so that’s why I have the positioning though it still doesn’t start at the top of the page either. I can get the background-image with the css though now that I try to move elements to different parts of the page it doesn’t stay still. Is there a way to set the background image to not adjust?
Update
I positioned the image though there are a few questions I have on StackOverflow with similar code question this did actual address the position of the image though there is still some responsive elements I haven’t posted. CSS Image positioning
I’m still on a local environment for the time. Again, I can see the images just not when I set it a background. When I’m done I’ll have the images with the site up in the same hosting. @Flet
I can get the background-image with the css though now that I try to move elements to different parts of the page it doesn’t stay still. Is there a way to set the background image to not adjust?
I tried this and didn’t work but got it working thanks.
Hey Sorry for a very Late Reply To your Comment It would be Nice to Show us How you Did Or Provide the Page or resources you used
