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.
Related
<html>
<head>
<style>
#contain_main {background-color:black;
width:100%;
height:auto;}
#main {width:100%;
height:700px;
background-image:url("https://www.sappun.co.kr/shopimages/sappun/0090040002602.jpg?1581389206");
background-repeat:no-repeat;
background-position:center center;
background-color:#dbdbdb;}
</style>
</head>
<body>
<div id="contain_main">
<div id="main">
</div>
</div>
</body>
</html>
how can i make the black #contain_main box is place over the #main div box?
i used z-index, position and display, but not work..how can i fix this?
any help will so appreciated! :)
One method is to make a sibling div to the image which is just the black background with lowered opacity (div#overlay). Add position relative to the parent. That way, you can add position absolute to the children, make them top and left 0 aligned to the parent, and give the black background a higher z-index than the image so that it overlays on top.
<html>
<head>
<style>
#contain_main {width:100%;
height:700px;
position: relative;}
#overlay {position: absolute;
top: 0;
left: 0;
background-color: #000;
opacity: 0.5;
width: 100%;
height: 100%;
z-index: 1;}
#image {position: absolute;
top: 0;
left: 0;
width:100%;
height:100%;
background-image:url("https://www.sappun.co.kr/shopimages/sappun/0090040002602.jpg?1581389206");
background-repeat:no-repeat;
background-position:center center;
}
</style>
</head>
<body>
<div id="contain_main">
<div id="overlay"></div>
<div id="image"></div>
</div>
</body>
</html>
You can stack child within by using z-index:-1;.
fiddle to playaround.
Use relative to parent.
Use absolute and z-index:-1; to child.
For demo purpose I have just used a padding:10px; to show that there is indeed child div is under parent, so you can take that out.
#contain_main {
background-color: black;
width: 50%;
height: 700px;
position: relative;
padding: 10px;
}
#main {
width: 100%;
height: 700px;
background-image: url("https://www.sappun.co.kr/shopimages/sappun/0090040002602.jpg?1581389206");
background-repeat: no-repeat;
background-position: center center;
background-color: gray;
position: absolute;
z-index: -1;
}
<html>
<head>
</head>
<body>
<div id="contain_main">
<div id="main">
</div>
</div>
</body>
</html>
A simple way to go about adding overlays is to use multiple backgrounds with one of them being a gradient (the overlay color with an alpha value) and the other one being the background-image:
#main {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(https://www.sappun.co.kr/shopimages/sappun/0090040002602.jpg?1581389206);
}
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.
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.
My goal is to have a background image span the entire screen like this: http://playjudgey.com/
I am trying to change my background image to be grayscale, but every time I do, it changes all of the text that is written over the image. I assume that the filter is applying to everything that is inside of the my div. My code is below:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="wrapper">
<div class="hometext">
You are the best!
</div>
</div>
</body>
So this is what I did for my CSS:
.hometext {
width: 600px;
margin: 0 auto;
color: red;
text-align: center;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url('../img/money.jpg');
-webkit-filter: grayscale(1);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
overflow: hidden;
}
The issue is that the text I write is not red, but gray. Is there any way to code this differently so my text will appear colored? Or should I just turn the image grayscale through an outside program?
You can get this same effect with a blend mode, that applies only to the background, and besides, it has more support (FF)
.hometext {
width: 600px;
margin: 0 auto;
color: red;
text-align: center;
font-size: 60px;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: url('http://placekitten.com/1000/750');
background-color: gray;
background-blend-mode: luminosity;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
overflow: hidden;
}
<div class="wrapper">
<div class="hometext">
You are the best!
</div>
</div>
If you have no need to change the background color dynamically, I would just change it to grayscale in a basic image editor. CSS filter is not fully cross-browser compatible I believe anyways, so you will be safer that way (and easier).
If you were to keep things how they are now, though, you would just need to change the filter property on your text as its inheriting it from your parent div.
What if you put your hometext div outside of the wrapper, making them both absolute:
<body>
<div class="wrapper"></div>
<div class="hometext">
You are the best!
</div>
.hometext {
margin: 0 auto;
color: red;
text-align: center;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1000;
}
Additional CSS will be needed for styling and position, but here is a fiddle: http://jsfiddle.net/Lepe84tu/
Instead of putting the background image on .wrapper, you could make another div as a sibling of .hometext that has the image as the background - that way you can style the image and the text independently.
Your <div class="wrapper"> div is wrapping also your hometext div. You should try this:
.hometext {
width: 600px;
margin: 0 auto;
color: red !important;
text-align: center;
}
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.