How to set background to div - html

I tried to set image in background of a div but disappeared! I want the background image covers all page, thanks.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div {
width:100%;
height: 100%;
background-image: url('https://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg');
}
</style>
</head>
<body>
<div></div>
</body>
</html>


Just attach it to the body directly :
body {
background-image: url("img_link");
}
Hope this helps.


.img{
width:100px;
height:100px;
}
<div>
<img src="img1.jpg"/>
</div>


for this make parents 100% by:
html,body{width:100%;height: 100%;}

Related

Can I set the background image the property(Scale to Fill, Aspect Fit, Aspect Fill)？

In html can I set the background image the below property？(the image is in iOS I can set the image's fill property like below, but I don't know if there is the similar property in html):
Scale to Fill,
Aspect Fit,
Aspect Fill
In my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1 {
width:300px;
height:200px;
background: gray url(img/1.png);
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
The image is like this:
But the result is like below, the image is trim:

For the first three properties that would be:
background-size: 100% 100%;
background-size: contain;
background-size: cover;
And this would be the code to recreate the Ford image you're showing with the three background size properties.
#img1,#img2,#img3{
background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Ford_Motor_Company_Logo.svg/2000px-Ford_Motor_Company_Logo.svg.png);
background-position:center center;
background-repeat:no-repeat;
background-color:#f00;
width:20vw;
height:20vw;
display:inline-block;
}
#img1{background-size:100% 100%}
#img2{background-size:contain}
#img3{background-size:cover}
<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
Also on JSFiddle.
For your second question the best solution would be to use background-size:cover; like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1 {
width:300px;
height:200px;
background-image:url(https://i.stack.imgur.com/dOnF7.png);
background-size:cover;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
If you have additional questions, feel free to ask!

For a background image, your "Aspect Fit" equals background-size: contain;, Aspect Fill would be cover

html and css background url image compacted

I created a web page image fills the screen 100%.
but, Problems occurred.
I want to fill up the picture on a Web page, as shown below:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#section
{
margin-top:240px;
margin-left:140px;
padding:10px;
text-align:center;
}
#top-slogan
{
width:100%;
height:953px;
background: url('background.png') center;
}
#top-header
{
z-index:100;
position:absolute;
width:100%;
height:133px;
}
</style>
</head>
<body>
<div id="top-slogan" class="wrapper">
<div id="top-header" class="section">
</div>
</div>
</body>
</html>
The results came out, there are some problems.
Without being tightly filled, the image is repeated.
I want a solution.
I want delete "This part":

You can add this style
#top-slogan{
background-repeat: no-repeat;
background-size : cover;
background position : center center;
}

You can add no-repeat. Then it won't repeat.
" background-repeat: no-repeat;"
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#section
{
margin-top:240px;
margin-left:140px;
padding:10px;
text-align:center;
}
#top-slogan
{
width:100%;
height:953px;
background: url('backgroung.png') center;
repeat:no-repeat;
}
#top-header
{
z-index:100;
position:absolute;
width:100%;
height:133px;
}
</style>
</head>
<body>
<div id="top-slogan" class="wrapper">
<div id="top-header" class="section">
</div>
</div>
</body>
</html>

You can scale this image by setting it's width and height .
#top-slogan
{
width:100%;
height:953px;
background: url('backgroung.png') center;
background-size: 100% 100%;
repeat:no-repeat;
}

Try this One
#top-slogan
{
width:100%;
height:953px;
background: url('background.png') no-repeat center;
background-size :cover;
}

to fix the picture in the banner

![an aeroplane ][1]
#top
{
background-color:maroon;
width:100%;
height:110px;
background-image:url(im.jpg);
background-repeat:no-repeat;
}
I want the picture to fix in the banner. But I have no idea how to achieve this.

<!doctype html>
<html>
<head>
<style>
#sample{
background-color:maroon;
width:100%;
height:110px;
background-image:url(im.jpg);
background-size: 100% 110px;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id='sample'></div>
</body>
</html>

simple html and css assistance

i have a logo called gif.gif, what i am trying to do is position it on the top left corner. At the moment there is a gap, i want no padding or margins.
This is my html and css
CSS
#header, .img
margin:0px;
padding:0px;
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="foo.css" type="text/css" /><!-- Footer Stylings -->
</head>
<body>
<div id="header">
<div class="logo">
<a href="https://www.google.co.uk"/><img src="gif.gif"/></a>
</div>
</div>
</body>
</html>

Try this:
body
{
margin:0px;
padding:0px;
}

Consider approaching it purely in CSS, like so;
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="foo.css" type="text/css" /><!-- Footer Stylings -->
<style>
html, body {
margin: 0px;
padding: 0px;
}
#header {
margin: 0px auto;
width: 960px;
}
.logo {
display: block;
width: 200px;
height: 200px;
background-image: url('gif.gif');
}
.logo:hover {
/* Some hover styling here */
}
</style>
</head>
<body>
<div id="header">
</div>
</body>
</html>
You would make your a tag a block (non-inline). I assumed the size to be 200x200 pixels. You can change that to your liking. The a tag will still maintain it's hyperlink properties, but display differently.

Try reset your css before your start do anything.
<style type="text/css">
* {
margin:0;
padding:0;
list-style:none;
vertical-align:baseline;
}
</style>
I make a simple test with css reset above and works fine. Just paste before all css in your html file.

Add to the body:
body{margin:0px; padding:0px;}
You can eliminate this kind of problems if you use reset.css or normalize.css

Stretch DIV to the bottom of the page with a element above it

I try to stretch a DIV to the bottom of the page with a element above it. That basically works but the height of the element above it is added to the DIV.
Please see jsFiddle example: http://jsfiddle.net/CjKFX/
How to fix this?

CSS:
html, body {height: 100%;}
#header, #headline { position:absolute; width:100%; top:0; }
#header {height: 100px; z-index:1; background-color:#f40; }
#headline {height: 100%; top:100px; margin-top:-100px; background: #000;}
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<header id="header">
header
</header>
<section id="headline">
section
</section>
</body>
</html>
http://jsfiddle.net/Zeggw/
​