I am trying to add a "strip" of an image to the left top of the div as a background with a fixed attachment property. Here it is:
https://jsfiddle.net/mvfariajr/recLr6yf/
HTML:
<div id="wrapper">
<div id="container">
<h1>TESTING</h1>
</div>
</div>
CSS:
#wrapper {
width: 100%;
height: 500px;
background-color: #ccc;
}
#container {
text-align: center;
margin: 0 auto;
width: 80%;
height: 400px;
background-color: #fff;
background-position: left top;
background-repeat: no-repeat;
background-size: 70px 100%;
background-attachment: fixed;
background-image: url(http://ariseartgroup.com/interiors/wp-content/uploads/2017/01/metal-texture-trim.jpg);
}
The issue is that the background isn't always to the left of the div.
Any help?
Thanks!
Here you go:
#wrapper {
width: 100%;
height: 500px;
background-color: #ccc;
}
#container {
text-align: center;
margin: 0 auto;
width: 80%;
height: 400px;
background:white url("http://ariseartgroup.com/interiors/wp-content/uploads/2017/01/metal-texture-trim.jpg") 10% 50% no-repeat;
background-size: 70px 100%;
background-attachment: fixed;
}
<div id="wrapper">
<div id="container">
<h1>TESTING</h1>
</div>
</div>
Related
i´m building a website that has different background images as you scroll down.
The problem I am facing is that each background image is not fitting the screen (in terms of the height). My images won't fit the whole screen unless I set them to have 1100px and therefore will not be fitting the 100% of my height, but let's say they will be going down, on those 20% who are going to come as I scroll down.
I would like to have my images fit 100% of the screens height, without being cut
and going bellow the page.
.container {
background-size: 100%;
background-size: cover;
margin-top: 1vh;
}
.parallax {
background: url("quem-somos.png") ;
background-size: cover;
width: 100%;
height: 100%;
}
.parallax2{
background: url("servicos.png") no-repeat center;
background-size: cover;
height: 1100px;
width: 100%;
background-attachment: scroll;
}
.parallax3{
background: url("depoimentos.png") no-repeat center;
background-size: cover;
height: 1100px;
width: 100%;
background-attachment: scroll;
}
.parallax4{
background: url("comecando.png") no-repeat center;
background-size: cover;
height: 1100px;
width: 100%;
background-attachment: scroll;
}
.parallax5{
background: url("sac.png") no-repeat center;
background-size: cover;
height: 1000px;
background-attachment: scroll;;
width: 100%;
}
.parallax6{
background: url("onde-atuamos.png") no-repeat center;
background-size: cover;
background-attachment: scroll;
height: 1000px;
width: 100%;
}
I have put all of the images inside the container
<div class="container">
<div class="parallax" id="about">
</div>
<div class="parallax6" id="operations">
</div>
<div class="parallax2" id="servicos">
</div>
<div class="parallax3" id="Depoimentos">
</div>
<div class="parallax4" id="Comecando">
</div>
<div class="parallax5" id="sac">
</div>
</div>
You can use this to set the div height to the screen height, you have to make sure html and body have a min height of the screen and also set the background-size: cover
Also .image1 .image2 in my case are direct children of the body element in my example
html, body {
margin: 0;
width: 100%;
min-height: 100vh;
}
.image1 {
width: 100%;
height: 100vh;
background-color: red;
}
.image2 {
width: 100%;
height: 100vh;
background-color: blue;
}
You can have the child divs do the heavy lifting by setting heights to 100vh - the margin on top of the container.
https://jsfiddle.net/x2h0mat7/
Here's a working example with the original html:
<div class="container">
<div class="parallax" id="about">
</div>
<div class="parallax6" id="operations">
</div>
<div class="parallax2" id="servicos">
</div>
<div class="parallax3" id="Depoimentos">
</div>
<div class="parallax4" id="Comecando">
</div>
<div class="parallax5" id="sac">
</div>
</div>
and the css:
.container {
margin-top: 1vh;
}
.container>div {
min-height: calc(100vh - 1vh);
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
z-index: 2;
display: flex;
overflow: hidden;
background-attachment: scroll;
}
.parallax {
background: url("https://via.placeholder.com/1600x1200/0000FF/");
}
.parallax2 {
background: url("https://via.placeholder.com/1600x1200/990000/") no-repeat center;
}
.parallax3 {
background: url("https://via.placeholder.com/1600x1200/ffee66/") no-repeat center;
}
.parallax4 {
background: url("https://via.placeholder.com/1600x1200/66eeff/") no-repeat center;
}
.parallax5 {
background: url("https://via.placeholder.com/1600x1200/ee66ff/") no-repeat center;
}
.parallax6 {
background: url("https://via.placeholder.com/1600x1200/ffee66/");
}
I am trying to adjust my logo at the center of the webpage, but whenever I adjust it in my CSS file, the background is getting affected by the changes so there will be white spaces on top.
.bgimage {
width: 1903px;
height: 1000px;
background-image: url(https://drive.google.com/uc?id=1ZtitWTmH3qglyS7uv4X32GDQv35fmhwG);
background-attachment: fixed;
background-size: cover;
margin-top: 60px;
display: block;
}
.bgimage .ETLOGO {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 80px;
width: 40%;
height: 50%
}
<div class="bgimage">
<img src="https://drive.google.com/uc?id=1vXkFqCQzC7sagYCBOuAwDQMf-uhJTmAo" class="ETLOGO">
</div>
Here is a photo of my website.
I think what you wanted was padding at the top of the logo, instead of margin. Try this:
.bgimage {
background-attachment: fixed;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/0/0f/MOS6581_chtaube061229.jpg);
background-position: center;
background-size: cover;
height: calc(100vh - 50px);
width: 100vw;
}
.bgimage .ETLOGO {
display: block;
height: 50%;
margin: 0 auto;
padding-top: 40px;
}
<div class="bgimage">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/440px-Intel-logo.svg.png" class="ETLOGO">
</div>
I was wondering how to center 3 divs inside a div.
Here is my code example
body {
position: fixed;
height: 100%;
width: 100%;
}
#container {
border: 3px solid black;
height: 90%;
width: 90%;
}
.plaatje {
width: 30%;
height: 70%;
border: 2px solid black;
float: left;
text-align: center;
}
#plaatje1 {
background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje2 {
background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje3 {
background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div id="container">
<div id="plaatje1" class="plaatje">
</div>
<div id="plaatje2" class="plaatje">
</div>
<div id="plaatje3" class="plaatje">
</div>
</div>
The problem is, there is still a white space on the right hand-side of the picture, I have marked it so you know what i'm talking about.
It also needs to scale, so if I resize the window, that the third image doesn't pops below the first or that the space exists when I resize it fully.
Any help is appreciated.
I have created a jsFiddle which demonstrates how you can do this using flexbox. It doesn't require floating the elements and gives you with exactly what you're looking for.
I have added a wrapper around the images (.images) and given it the flex properties required to align its contents, then removed the floats and a few other unnecessary things.
Here is the browser support for flexbox: caniuse:flexbox
body {
position: fixed;
height: 100%;
width: 100%;
}
#container {
border: 3px solid black;
height: 90%;
width: 90%;
}
.images {
height: 90%;
display: flex;
justify-content: center;
}
.plaatje {
width: 30%;
height: 70%;
border: 2px solid black;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje1 {
background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
}
#plaatje2 {
background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
}
#plaatje3 {
background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
}
<div id="container">
<div class="images">
<div id="plaatje1" class="plaatje"></div>
<div id="plaatje2" class="plaatje"></div>
<div id="plaatje3" class="plaatje"></div>
</div>
</div>
You could just simply try adding text-align:center; to your container div
There are many ways to do this, and you should probably start with http://www.w3schools.com/css/css_align.asp - this elementary level question often gets flagged as not appropriate for SO.
But! Welcome. Here's one way you could do this - I've added comments to explain what's going on. Basically your float: left by definition made the .plaatjes impossible to center; and the text-align: center needs to be on the containing element
body {
position: fixed; /* probably don't actually want */
height: 100%;
width: 100%;
margin: 0; /* add */
}
#container {
border: 3px solid black;
height: 90%;
width: 90%;
margin-left: 5%;
text-align: center; /* add */
}
.plaatje {
width: 30%;
height: 70%;
border: 2px solid black;
/* float: left; // remove
text-align: center;*/
display: inline-block; /* add */
}
#plaatje1 {
background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje2 {
background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje3 {
background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div id="container">
<div id="plaatje1" class="plaatje">
</div><div id="plaatje2" class="plaatje">
</div><div id="plaatje3" class="plaatje">
</div>
</div>
<!-- removed spaces between the divs -->
I have a #div1 with 100% height and #div2 inside #div1. #div2 located at the top of #div1 with semi-transparent background. But, because the #div1 have a repeating background, translucent under the #div2 is the background of #div1. I want to "move" the background of #div1 from the top of the height of #div2
see image
CSS:
#div1 {
border: none;
width: 812px;
height: 100%;
background-image: url(http://i.imgur.com/tcPWRzF.png);
background-repeat: repeat-y;
margin: 0 auto;
}
#div2 {
background-image: url(http://i.imgur.com/DnDnz22.png);
background-color: transparent;
background-position: center;
width: 812px;
height: 488px;
}
HTML:
<div id="div1">
<div id="div2">
</div>
Give div1 a little window to show through by giving it padding-top. http://codepen.io/amishstripclub/pen/VKdjmr
#div1 {
padding-top: 488px;
}
For some reason that image in div1 isn't repeating. I don't know if this will work for you, but you can play around with it.
<!DOCTYPE html>
<html>
<head>
<title>page title</title>
<style>
#div1 {
position: relative;
top: 75px;
border: none;
width: 812px;
height: 100%;
background-image: url(http://i.imgur.com/tcPWRzF.png);
background-repeat: repeat-y;
margin: 0 auto;
}
#div2 {
position: relative;
top: -75px;
background-image: url(http://i.imgur.com/DnDnz22.png);
background-repeat: no-repeat;
background-color: transparent;
background-position: center;
width: 812px;
height: 488px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
try flexbox alternative for block level alignment
#div1 {
border: none;
width: 812px;
min-height:1200px;
height: 100%;
background-image: url(http://i.imgur.com/tcPWRzF.png);
background-repeat: repeat-y;
margin: 0 auto;
display: flex; /* establish flex container */
align-items: center;
}
#div2 {
background-image: url(http://i.imgur.com/DnDnz22.png);
background-color: transparent;
background-position: center;
width: 812px;
height: 488px;
}
<div id="div1">
<div id="div2">
</div>
PC : Michael_B
I tryed almost everything but doesn't work.
This is my code:
html, body{
width: 100%;
height: 100%;
margin:0px; }
.banner {
background: rgba(0, 0, 0, 0) url('http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg') 0 0 no-repeat fixed;
text-align: center;
background-size: cover;
height: 350px;
width: 100%;
margin-bottom: 3em;
display: table;
height: 100%;
}
<div class="banner" id="bannera"></div>
<div class="l-content" style="height: 700px;"> </div>
Try it: jsfiddle.net/6rf4o2aj/
Apply the background to body instead of banner. http://jsfiddle.net/6rf4o2aj/2/