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>
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>
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 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>
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;
}
I'm trying to create a dynamic icon using css sprites. here's what I keep getting:
So I actually have a couple of questions about what's going wrong:
Why is the icon (the box with the cross) not overlapping the purple boxes?
Why do the purple boxes have a 2px space between them?
EDIT
Here is a jsFiddle: http://jsfiddle.net/hWhUb/
here's the relavant css i'm using:
.icon {
position: relative;
width: 87px;
}
.icon .icon-type {
position: absolute;
left: 0;
}
.icon .brigade, .icon .icon-type {
background-image: url('img/play/splitbrigades.png');
}
.icon-hero {
width: 87px;
height: 71px;
background-position: -11px -11px;
background-repeat: no-repeat;
}
.brigade-purple-left {
width: 27px;
height: 71px;
background-position: -287px -12px;
display: inline-block;
background-repeat: no-repeat;
}
.brigade-purple-middle {
width: 30px;
height: 71px;
background-position: -334px -12px;
display: inline-block;
background-repeat: no-repeat;
}
.brigade-purple-right {
width: 28px;
height: 71px;
background-position: -384px -12px;
display: inline-block;
background-repeat: no-repeat;
}
and the html:
<div class="icon">
<div class="brigade brigade-purple-left"> </div>
<div class="brigade brigade-purple-middle" style="width: 22px;"> </div>
<div class="brigade brigade-purple-right"> </div>
<div class="icon-type icon-hero"> </div>
</div>
can anyone explain to me what I'm doing wrong, and possibly how I could achieve my result in a better way (if possible)?
add float: left to .icon .brigade
.icon .brigade {
float: left;
margin: 0;
}
this should fix everything you need or get you in the right place to finish it off!
the spacing between the purple boxes is because you were using display: inline-block; and the white space in your markup between these divs, generates that spacing.
the icon is not rendered "above" the boxes because it's missing the top: 0; declaration
You should use this. It must contain top.
.icon .icon-type { position: absolute; left: 0; top:0}
Live :
http://jsfiddle.net/hWhUb/1/