When I resized the "logo" as I wanted it, it does not longer align in center of the page, now it's in the left when I added those 2 last .logga.
So this is my code:
body {
background-image: url(http://i.stack.imgur.com/iOkRy.png);
background-color: #cccccc;
background-repeat: no-repeat;
background-size: cover;
}
.logga {
width: 200px;
height: 120px;
}
.logga img {
width: 100%;
height: auto;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Hello</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="logga" align="center">
<img src="http://i.stack.imgur.com/iOkRy.png" alt="Hello">
</div>
</body>
</html>
It aligns to the center of the containing div. If you need the div to center. The parent element needs to have a width property and then the child element would need margin-left: auto and margin-right: auto;.
Example fiddle here:
https://jsfiddle.net/8yhsr5ba/
You can solve this with CSS by specifying margin:0 auto; for the .logga class.
.logga{
width: 200px;
height: 120px;
margin:0 auto;
}
That lets the browser calculate even spacing on each side of the element automatically. Note: although deprecated, it could also be centered with HTML by using <center></center>
<!DOCTYPE HTML>
<html>
<head>
<title>Hello</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<center>
<div class="logga" align="center">
<img src="logga.png" alt="Hello">
</div>
</center>
</body>
</html>
Try this. You'll get your image centered.
body {
background-image: url("bg2.jpg");
background-color: #cccccc;
background-repeat: no-repeat;
background-size: cover;
}
.logga {
width: 200px;
height: 120px;
margin-left: auto;
margin-right: auto;
background-color:white;
}
.logga a{
display:block;
}
.logga img {
display:block;
width: 100%;
height: auto;
}
<div class="logga">
<img src="http://7-themes.com/data_images/out/62/6983929-fall-nature-photography.jpg" alt="Hello">
</div>
The align attribute is not supported in HTML5. Use CSS instead, like this:
.logga {
width: 200px;
height: 120px;
margin: 0 auto; /* this places .logga in the center of the body */
text-align: center; /* this centers inline elements inside .logga, you don't necessarily need it */
}
just use margin:auto; in style.
Related
This question already has answers here:
Is there an equivalent to background-size: cover and contain for image elements?
(14 answers)
Closed last year.
How to make a normal image (be it 'img' or 'svg') behave exactly like a 'background-image' ? I mean, covering the whole screen and getting cropped to never display borders ?
Only 'css', no 'js'.
I tried this, mostly from img behaving like a background img?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
background-image: url("./demo.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
</style>
</head>
<body>
<div class="bg">
<img src="./demo.jpg" style="position:fixed; z-index:-5000; top: 50%; left: 50%; margin-left: -960px; margin-top: -540px" >
</div>
</body>
</html>
The "demo.jpg" image is 1920x1080.
It works somewhat, but the top picture doesn't get "squeezed" if the window gets too narrow.
So I tried the proposed approach below :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
background-image: url("./demo.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
img {
display: block;
width: 100vw;
height: 100vh;
object-fit: cover;
}
</style>
</head>
<body>
<div class="bg">
<img src="./demo.jpg">
</div>
</body>
</html>
Which looks like it is working.
The main purpose is to add a clickable map area to the background image. But since it is a "background image", nothing can be clicked.
The map works at that point, goal reached.
Yet I tried the 'img' approach with a 'svg' instead, but the 'a href' just doesn't work like expected :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
background-image: url("./demo.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
img {
display: block;
width: 100vw;
height: 100vh;
object-fit: cover;
}
</style>
</head>
<body>
<div class="bg">
<img src="./demo.svg">
</div>
</body>
</html>
If I copy the 'svg' directly, it then refuses to get "cropped", it is always "contain" :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
background-image: url("./demo.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
svg {
display: block;
width: 100vw;
height: 100vh;
object-fit: cover;
}
</style>
</head>
<body>
<div class="bg">
<svg viewBox="0 0 1920 1080" >
<a href="https://www.google.fr/">
<rect x="351" y="797" fill="#777" opacity="100%" width="92" height="42">
</rect>
</a>
</svg>
</div>
</body>
</html>
Any idea ?
use object-fit:cover
img {
position:fixed;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}
<img src="https://picsum.photos/id/1069/1000/1000">
No matter what I do, I cannot get my image in the .container div to show up properly when formatting with CSS. Only the top ~10% of the image is showing. If I put the img tag in HTML it will work perfectly. But I want to format in CSS, not HTML, and in such away that it is mobile-first compatible. What I want is for the image to be centered and larger than it's currently displaying. Here is my HTML:
<!DOCTYPE html>
<html lang="en-US">
<link rel="stylesheet" type="text/css" href="RABstyle.css">
<title>Home</title>
<meta charset = "UTF-8">
<meta name="author" content="Beth Bennett">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<header>
<div class="icons"><p>Icons</p></div>
<ul class = "buttons">
<button id="LogIn" type="button">Log In</button>
<button id="SignUp" type="button">Sign Up</button>
</ul>
</header>
<div class="container">
<h2 class="intro">America's source for....</h2>
<ul class="selector">
<li class="active">Ds</li>
<li>Cs</li>
<li>Or</li>
</ul>
</div>
</body>
</html>
And here is my CSS:
* {
box-sizing: border-box;
margin: 0px;
padding:0px;
font-family: Calibri, Helvetica, sans-serif;
}
body {
background-color:#ffffE0;
}
header {
background-color: #AA0000;
height: 75px;
padding: 15px;
}
.icons{
float: left;
margin-left: 100px;
}
.buttons {
text-align: right;
margin-right: 300px;
}
.container {
background: url("HomePageImageFinal.svg") no-repeat;
background-position: center top;
background-size: 1500px 1000px;
}
Add px - it doesn't have any measurement unit now - or 100% to your width and height attributes (depending on your needs)
I added a background-size:cover to your code and it worked, with another image, because you didn't provide the SVG:
.container {
background: url("http://lorempixel.com/200/200/") no-repeat;
background-size:cover;
background-position: center top;
height: 2000px;
width: 2000px;
}
Here's the fiddle
You can try
background-size: 100% 100%; or
background-size: contain; or
background-size: cover;
depending on what you are trying to achieve.
Also, if you have floats inside your container than you need to clear these. The container won't have any height with floating elements inside. Unless you specify a fixed height of course.
Basically I am trying to do whats device here :
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position
Have my image in the background has an id on a div.
#wrapper {
height: 900px;
width: 900px;
border: solid black;
margin-left: auto;
margin-right: auto;
}
#idbackground {
background-image: url("http://i.imgur.com/7h8ejPJ.png");
width: 324px;
height: 250px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position:center center;
}
<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="idbackground"></div>
</div>
</body>
</html>
instead of centering the image disappears..
You forgot a semicolon after your
background-image: url("http://i.imgur.com/7h8ejPJ.png")
Also add width and height property to your image div to 100%.
#wrapper {
height: 900px;
width: 900px;
border: solid black;
margin-left: auto;
margin-right: auto;
}
#idbackground {
background-image: url("http://i.imgur.com/7h8ejPJ.png"); /* add semicolon here*/
background-repeat: no-repeat;
background-attachment: fixed;
background-position:center center;
width:100%; /*add width*/
height:100%; /*add height*/
}
<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="idbackground"></div>
</div>
</body>
</html>
The problem was you were setting a width and height and the image was wrapped within this, so the image was limited with in this boundaries and hence you see the part of image being not visible, and on scroll it completely gets hidden, because the image div is scrolled up..
background-image: url("http://i.imgur.com/7h8ejPJ.png") is missing ; in the end of line.
Your code is missing a semi-colon at the end of the declaration ... It should be
#idbackground {
background-image: url("http://i.imgur.com/7h8ejPJ.png");
....
}
The semi-colon is required to separate between each declaration. It's only allowed to be removed if the declaration is the last one.
This workes perfectly for me.
#idbackground {
background: url(http://i.imgur.com/7h8ejPJ.png)
}
Like Reddy said, make your width and height equal to 100% in your image div.
Should you ever use a non-square image use min-width and min-height properties with a value of 100% to square up to whichever axis is larger.
Also if you'd like you can save yourself typing by consolidating all your background properties into one shorthand background property like such...
#idbackground {
background: url("http://i.imgur.com/7h8ejPJ.png") no-repeat fixed center;
height: 100%;
width: 100%;
}
The shorthand syntax for the background property is as follows...
background: [color] [url(img.jpg)] [repeat_value] [attachment_value] [position_value(s)];
Just make sure you include spaces between each value and replace the bracketed items with the corresponding background- prefixed value. If left out or blank they will just be set to their default values.
Thus, a cleaned up version would be...
#wrapper {
height: 900px;
width: 900px;
border: solid black;
margin-left: auto;
margin-right: auto;
}
#idbackground {
background: url("http://i.imgur.com/7h8ejPJ.png") no-repeat fixed center; /* consolidated background shorthand */
height: 100%;
width: 100%;
}
... with the same HTML markup.
I am using multiple div in html code.Each div will hold image of 1600*750. Inside each div i have fixed image.These image will repeat on each multiple div I call these image as class on each div.
My first image is 218*73
My second image is 774*209
My third is 127*37
I want to fix my first image position at 137*88 of my background div image.
second image at 655*339 of background div image.
third image at 708*670 of background div image.
I don't want to use body to fix as background image as I Have multiple div with three fix image on all div.
Can any one tell how to fix these position with css using class for multiple div.
Thanks in advance
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My page</title>
<title>jQuery Parallax Plugin Demo</title>
<link rel="stylesheet" type="text/css" href="sd.css" />
</head>
<body>
<div id="a">
<div id="first" >
<div class="c d" >
This is my first div to display image.
</div>-->
</body>
</html>
CSS
body{
margin: 0;
min-width: 980px;
padding: 0;
padding: 0;
}
div {
-webkit-perspective: 500px; /* Chrome, Safari, Opera */
perspective: 500px;
}
#first{
width: 100%;
}
#first{
background:url('images/rc1.jpg') 50% 0 no-repeat fixed;
color: white;
height: 600px;
margin: 0 auto;
padding: 160px 0 0 0;
padding: 0;
perspective: 1px;
}
#first .d{
margin: auto;
position: relative;
width:=655px;
height:339px;
background: url('images/Logo.png');
background-repeat: no-repeat;
background-attachment: fixed;
}
#first .c{
margin: auto;
position: relative;
width:=137px;
height:88px;
background: url('images/big_text.png');
background-repeat: no-repeat;
background-attachment: fixed;
}
#first .e{
margin: auto;
position: relative;
overflow-x: 708px;
overflow-y: 670px;
background: url('images/big_text.png');
background-repeat: no-repeat;
background-attachment: fixed;
}
The following code shows an example with your images sizes and positions:
body {
background-image:url('http://placehold.it/1600x750');
}
.first {
background-image:url('http://placehold.it/218x73');
border:1px dashed #000;
display:block;
height:73px;
left:137px;
position:absolute;
top:88px;
width:218px;
}
.second {
background-image:url('http://placehold.it/774x209');
border:1px dashed #000;
display:block;
height:209px;
left:655px;
position:absolute;
top:339px;
width:774px;
}
.third {
background-image:url('http://placehold.it/127x37');
border:1px dashed #000;
display:block;
height:37px;
left:708px;
position:absolute;
top:670px;
width:127px;
}
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
can you create a snippet ? the div are not closed, first and c div are within div "a" ?
<div id="a">
<div id="first" >
<div class="c d" >
This is my first div to display image.
Quite new to CSS3 and I have a issue with the DIV not changing height as the background-image get's larger (height). The DIV should expand as the background image is expanding. After this DIV there will be a footer with fixed height.
The web page:
http://www.cre.fi/kalustekeskus/
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#full-screen-background-image {
background-image: url(../img/kalustekeskus_bg.jpg);
background-size: cover;
background-repeat: no-repeat;
min-width: 1024px;
width: 100%;
min-height: 90%;
position: fixed;
overflow: hidden;
border: 1px solid red;
}
<!DOCTYPE html>
<html>
<head>
<title>Kalustekeskus</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="full-screen-background-image"></div>
</body>
</html>
Is there any smart way of doing this?
Thanks!
In the website you have used min-weight:600px; change this to min-height:90%.
You can specify the min-height in percentage then the div will expand with respect to the actions you do in the image.