I need to put HTML content within a page template. The section I have been given is within a Div container defining the size I have to work with. The CSS for the template defines margins of 17.5% left and right meaning I have 65% in the centre to input my content. This is ok for a majority of the content I need to include except the background image that needs to be full width (100%). I can attach a style sheet with my content however if I change the .wrapper element in my css it causes issues with the rest of the page. I also have to change the background image on a page by page basis so have to include the image path in the HTML and not in the CSS.
What I have so far is
HTML:
<div class="pageBackground">
<img src="img/festival-background.jpg">
</div>
CSS:
.pageBackground {
position: relative;
}
.pageBackground img {
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
}
What would be a correct way to make my background image 100% of the page rather then container and behind the rest of my content?
Many thanks in advance!!!
This is entirely possible using the same techniques as detailed in this Q/A.
Essentially, using no additional HTML, we use an absolutely positioned pseudo-element as the background to the required section/div.
.extra {
position: relative;
}
.extra::after {
content: '';
position: absolute;
top:0;
width: 100vw;
height: 100%;
left:50%;
transform:translateX(-50%);
background-image: url(http://lorempixel.com/output/abstract-q-c-1000-250-5.jpg);
background-size: cover ;
background-repeat: no-repeat;
}
* {
margin: 0;
padding: 0;
}
.container {
width: 65%;
margin: auto;
border: 1px solid green;
}
section {
min-height: 100px;
border: 1px solid lightgrey;
}
.extra {
position: relative;
}
.extra::after {
content: '';
position: absolute;
top: 0;
width: 100vw;
height: 100%;
left: 50%;
transform: translateX(-50%);
background-image: url(http://lorempixel.com/image_output/abstract-q-c-100-100-1.jpg);
background-size: cover;
background-repeat: no-repeat;
}
<div class="container">
<section></section>
<section class="extra"></section>
<section></section>
</div>
Don't know if you have that kind of permission, but you could put img outside that div, and set them both on position absolute.
<img src="asdf>
<div class="wrapper">
CSS:
.wrapper {
position: absolute;
text-align: center;
width: 65%;
background-color: transparent;
height: 300px;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -32.5%;
}
img {
position: absolute;
top: 50%;
width: 100%;
height: 50px;
background-color: gray;
}
jsFiddle
In your CSS, add the background image to the body property and then put the rest of your site in an entire container div, within which all other properties will reside.
HTML:
<body>
<div class="entireSite">
Site content goes here.
</div>
</body>
CSS:
.body {
background-image:url("img/festival-background.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
}
.entireSite {
position: absolute;
z-index: -1;
}
Related
I have 3 sections that their parents is only the body, section 2 (menu) background in this case is larger than 100vh. Giving the height:auto; won't work, I would like to stretch the height of the section according to the background length ( auto ), I don't want to give it a specific value using ( px, vh, cm, ... etc). I'm pretty sure it's simple answer but I couldn't figure it out my self. Thank you
html,body {
position: relative;
background: white;
margin: 0;
padding: 0;
}
#Home {
position: relative;
height: 100vh;
width: 100vw;
background-image: url(/images/Header.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#Menu {
display: block;
position: relative;
height: auto;
width: 100vw;
background-image: url(/images/Menu.jpg);
background-size: cover;
background-repeat: no-repeat;
}
<html>
<body>
<section id="Home"></section>
<section id="Menu"></section>
<section id="Map"></section>
</body>
</html>
The only way you can achieve this is by not using the actual background property.
As #Mr Lister commented:
There is no way for an element to know the height of a background
image.
However, you can use an img tag with the image you want as background inside your #menu section.
Then, create a container div with absolute positioning which will contain the content of your actual section.
html,
body {
position: relative;
background: white;
margin: 0;
padding: 0;
}
#Home {
position: relative;
height: 100vh;
width: 100vw;
background-image: url(http://i.imgur.com/8tcxHWh.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#Menu {
display: block;
position: relative;
width: 100vw;
}
.content {
position: absolute;
left: 0;
top: 0;
}
h2 {
color: white;
font-size: 4em;
}
<section id="Home"></section>
<section id="Menu">
<img src="http://i.imgur.com/BF3ty6o.jpg">
<div class="content">
<h2>My content</h2>
</div>
</section>
<section id="Map"></section>
Received a two column layout design for a website. Each column has a transparent background that, combined, forms a curved cut-out at the top.
I need the columns to grow with content, however this distorts the background image when set on background-size: cover (Matching things up in order to use repeat-y won't work either). Is there a good way to accomplish this, or a way to tell him absolutely not?
.middle-left-container {
float: left;
min-height: 500px;
position: relative;
left: 0;
bottom: 0;
background-image: url('/tlm-wp/wp-content/uploads/2016/11/left-menu-background-sliced.png');
background-repeat: no-repeat;
background-size: cover;
width: 20%;
}
body:not(.home) .middle-left-container {
top: 0;
background-image: url('/tlm-wp/wp-content/uploads/2016/11/left- menu-main.png');
}
.middle-right-container {
float: left;
min-height: 500px;
position: relative;
top: 0;
right: 0;
bottom: 0;
background-image: url('/tlm-wp/wp-content/uploads/2016/11/banner-bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100%;
width: 80%;
}
body:not(.home) .middle-right-container {
background-image: none;
background-color: #fff;
}
Thanks,
Matt
Don't put the curved bg image on the <body>, put it on a fixed-width container, then anchor the bg-image position.
.container {
width:900px;
margin:0 auto;
background-position: top center;
...
}
Then inside that container, put each of your column containers. Something like:
<div class="container">
<div class="sidebar-nav"> ... </div>
<div class="middle-left-container"> ... </div>
<div class="middle-right-container"> ... </div>
</div>
I got the following structure
<div class="container">
<div class="html5">
<h3>HTML5</h3>
</div>
<div class="pc"></div>
</div>
And the CSS
.pc {
position: absolute;
top: 81%;
left: 38%;
width: 321px;
height: 240px;
background-image: url('images/pc.png');
background-size: cover;
}
.html5 {
width: 321px;
height: 240px;
background-image: url('images/1.png');
background-size: cover;
position: absolute;
top: 44%;
left: 27%;
}
I want to put my .html5 positined in a certain point to .pc, is there any way to make it responsive so when resizing the web page I can still maintain it in the same distance to the other div?
I'm using bootstrap, don't know if there is any trick with one of his classes.JSFiddle
I don't think you can't with the current structure. I'd suggest something like this, and position .html5 relative to .pc.
.pc {
position: absolute;
...
}
.html5 {
position: relative;
...
}
<div class="container">
<div class="pc">
<div class="html5">
<h3>HTML5</h3>
</div>
</div>
</div>
Hi here is the initial solution, but if you are working with bootstrap then you need to add it's library and some pre-defined classes. Another option to make it responsive is using media query.
.pc {
width: 321px;
height: 240px;
background-image: url('http://cremc.ponce.inter.edu/carpetamagica/cuadradoquisosercirculo_files/image001.gif');
background-size: cover;
float:left;
margin-left:10%;
margin-top:10%;
}
.html5 {
width: 321px;
height: 240px;
background-image: url('http://2.bp.blogspot.com/-fId_0wMCKhg/Tz8dxylpK2I/AAAAAAAAJCE/7gF4evDn5zo/s1600/que%2Bes%2Bun%2Btriangulo.jpg');
background-size: cover;
float:left;
margin-left:10%;
margin-top:10%;
}
I need a "background text" like this > (EXAMPLE)
The text doesn't go up when I scroll down the page.
my .css for background image
html,
body {
font-family: 'Lato', sans-serif;
height: 100%;
background: url(../img/image-bg-jpg.jpg) center center no-repeat fixed;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'm using bootstrap 3.3
If i were you i would put the image in with an image tag, then position it fixed, like this:
<img class="img" />
.img{ min-width: 100%; min- height: 100%; position: fixed; z-index: 0; }
And then put your text in a div under it like:
<div class="div">text goes here</div>
.div{ margin-top: 100%;}
The text in that example is in a container with fixed positioning:
.jumbotron .container {
position: fixed;
width: 100%;
padding-top: 5%;
top: 50%;
transform: translateY(-50%);
}
<div class="container"></div>
You should acquaint yourself with the browser's document inspector to discover this type of thing.
I am trying to create a simple responsive splash page with a background image and a div on top.
I have managed to get the responsive background image. This works well.
Now I am having issue placing a div on top of this background and making sure it follows the resizing properly.
I have set percentage margins for this div but it's not keeping the percentages, also if I make the window too small then the div disappears completely.
How can I fix this problem?
Thanks a lot for your help.
Guillaume
The address:
http://b-tees.net/testsplash/
My html:
<div id="bg">
<img src="http://b-tees.net/wp-content/uploads/2014/08/london.jpg" alt="">
</div>
<div id="selector">
<?php do_action('icl_language_selector'); ?>
</div>
My CSS:
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
#selector {
position:absolute;
margin-top:10%;
margin-left:10%;
}
My suggestion is to use like this : Demo
instead of the method you are using atpresent
CSS:
html, body {
min-height: 100%;
height: 100%;
padding:0;
margin:0;
}
.bg_img {
background:url("http://b-tees.net/wp-content/uploads/2014/08/london.jpg") no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height:100%;
}
#selector {
display:block;
vertical-align:middle;
text-align:center;
margin:0 auto;
width:50%;
}
HTML:
<div class="bg_img">
<div id="selector">Test test test..
</div>
</div>