I would just like the edges of my image to stretch the width of the screen. Not looking for it to be a full background.
My website is www.jobspark.ca
<div class="fullWidthSectionBG">
<div class="fullWidthSection">
<div class="myLeftColumn">
<p>
</p>
</div>
<div class="myRightColumn">
<h2>Used By Thousands Of Canadians</h2>
<p>Jobspark.ca is dedicated to providing resources for job seekers and employers throughout British Columbia and Alberta. Many top employers along with small local businesses from across the region post their jobs on Job Spark to find qualified professionals.</p>
<p>Job Spark simplifies your quest for the perfect career with a clean design and real-time postings. Our streamline job board was designed to take the headache out of finding a job.</p>
<p>Your job listings will be seen across multiple venues, receiving thousands of views each month! </p></div>
</div>
</div>
the CSS
.fullWidthSectionBG {
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
background-position:center;
background-repeat: no-repeat;
height:575px;
margin-left: -1600px;
margin-right: -1600px;
}
This answer was close but then the rest of the website that isn't an image extended full screen.
#site > .wrapper {
max-width: 960px;
padding: 0 50px;
margin: 0 auto;
position: relative;
}
change 960px to 100%
& get rid of
margin-left: -1600px;
margin-right: -1600px;
I have been fighting with this issue for a few days now and would be soo happy to figure something out. Might have to zoom out to see the issue.
What about adding
width: 100%;
to your css rules and getting rid of the margins ? like this
Is that your question ?
#site > .wrapper {
max-width: 960px;
padding: 0 50px;
margin: 0 auto;
position: relative;
}
change 960px to 100%
& get rid of
margin-left: -1600px;
margin-right: -1600px;
to achieve this goal i typically define a div element that fits the exact size and position i want my background image to fill.
then use the css attribute for background-size:cover; this Cover attribute scales the image automatically to ensure the entire background area is in fact "covered" by image. see the documentation here
here is a jsfiddle of an example of this method working
it is also worth noting to achieve intermittent full width areas between centered fixed width areas i like to use this method of defining a .wrapper class very similar to yours. then ending that wrapper for the full width area and once again restarting it afterwards
my adjustments to your code as follows:
CSS
.fullWidthSectionBG {
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
background-position: center;
background-repeat: no-repeat;
height:575px;
background-size: cover;
}
HTML
<div class="wrapper">
<!-- HEADER HERE -->
</div>
<div class="fullWidthSectionBG">
<div class="wrapper">
<!-- FULL WIDTH BANNER CONTENT HERE -->
</div>
</div>
<div class="wrapper">
<!-- BODY HERE -->
</div>
try it out let me know how it works - hope this helps!
Related
I'm a beginner and I tried to make one page by myself, however, the result is not good. I will try to explain what I need: Full-screen page with two images, one image will cover 50% of horizontal space of browser window, and second image will be on right side covering the rest of this page. I need both images to be responsive and to always keep 100% height. When the window is resized, left and right sides of both images will be cropped.
Very similar to this: http://www.gt3themes.com/website-templates/soho/striped_landing.html
Is this difficult to make? I tried to follow some guides on the web, but the result was that my images were stretched and not cropped. Maybe I am completely wrong and I need to create two columns and then put images inside?
I will appreciate any help.
My current code is:
.photo{
size: 100%;
position: relative;
overflow: hidden;
}
.photo img{
max-width: 50%;
height: 100%;
}
The site you linked more or less did something like this:
http://jsfiddle.net/xnLn6s5o/
HTML
<div id="container">
<div id="left" class="halfwidthcontainer">
<div id="left-image" class="image"></div>
</div>
<div id="right" class="halfwidthcontainer">
<div id="right-image" class="image"></div>
</div>
</div>
CSS
html, body, #container, #left, #right, #left-image, #right-image {
height:100%;
}
.halfwidthcontainer {
float: left;
width: 50%;
}
.image {
background-size: container;
background-repeat: no-repeat;
background-position: 50% 50%;
}
#left-image {
background-color: red;
background-image: url('');
}
#right-image {
background-color: blue;
background-image: url('');
}
The general idea is that two containers sit side by side, floated (see this answer as why to use floats to position containers side by side instead of inline-block).
The idea thereafter is to explot the CSS background property which will allow you to get the overflow/positioning effects you want. You can read more about that here.
You're going to want to fill in the background-image properties of the #left-image and #right-image IDs to add the images you want.
When I view this page in Chrome, Firefox, or IE11, I notice upon horizontally resizing the window to its minimum width causes an overflow of text out of the white background div at the bottom of the page. The div is set to a height of 100%, so should it not continue to match the height of the page? It may seem the 100% matches the height of the window only, but upon initially loading the page in Chrome I see the white div causes a scroll bar such that there is more white space extended beyond on the height of the window.
I tried putting overflow: auto; in the #main css and the div ended up with a scroll bar. I removed it as it's not a solution I can accept. How can I get the div to accommodate its content automatically?
<html>
<head>
<style>
body, html {
margin: 0;
padding: 0;
}
html {
background: url('http://losingmedotorg.files.wordpress.com/2013/04/two-roads-in-a-wood.jpg') no-repeat center center fixed;
background-size: cover;
}
#main {
margin-left: 20%;
margin-right: 20%;
background-color: white;
height: 100%;
padding: 10%;
}
</style>
</head>
<body>
<div id="main">
<h1>The Road Not Taken</h1>
Two roads diverged in a yellow wood, And sorry I could not travel both And be one traveler, long I stood And looked down one as far as I could To where it bent in the undergrowth; Then took the other, as just as fair And having perhaps the better claim, Because it was grassy and wanted wear; Though as for that the passing there Had worn them really about the same, And both that morning equally lay In leaves no step had trodden black. Oh, I kept the first for another day! Yet knowing how way leads on to way, I doubted if I should ever come back. I shall be telling this with a sigh Somewhere ages and ages hence: Two roads diverged in a wood, and I - I took the one less traveled by, And that has made all the difference.
<p>- Robert Frost</p>
</div>
</body>
</html>
padding will mess up height: 100%. It seems to calculate the height and then add the padding so the resulting height is actually closer to 120%. I tried this code in a local html file and it seems to do the trick.
Try this instead:
<html>
<head>
<style>
body, html {
margin: 0;
padding: 0;
}
html {
background: url('http://losingmedotorg.files.wordpress.com/2013/04/two-roads-in-a-wood.jpg') no-repeat center center fixed;
background-size: cover;
}
#main {
margin-left: 20%;
margin-right: 20%;
background-color: white;
height: 100%;
}
#content {
padding: 10%;
}
</style>
</head>
<body>
<div id="main">
<div id="content">
<h1>The Road Not Taken</h1>
Two roads diverged in a yellow wood, And sorry I could not travel both And be one traveler, long I stood And looked down one as far as I could To where it bent in the undergrowth; Then took the other, as just as fair And having perhaps the better claim, Because it was grassy and wanted wear; Though as for that the passing there Had worn them really about the same, And both that morning equally lay In leaves no step had trodden black. Oh, I kept the first for another day! Yet knowing how way leads on to way, I doubted if I should ever come back. I shall be telling this with a sigh Somewhere ages and ages hence: Two roads diverged in a wood, and I - I took the one less traveled by, And that has made all the difference.
<p>- Robert Frost</p>
</div>
</div>
</body>
</html>
Okay, so i need a slider which is in a normal page to span across the whole screen.
The wrapper and all other elements is 960px max-width so thats how far the slider goes.
If i change these, the whole site will become messed up.
Im using Wordpress 3.5 with Twentytwelve theme as parent.
SLIDER: http://rocketplugins.com/wordpress-slider-plugin/
This is the only code i use in the post. So i guess i need to make the post wider?
[slider id='32' name='']
Not too sure about the product that your link explains but you will need to edit your page template.
There will be a content div (the one with max-width set). your new div, the one for the new slider, needs to be above it. I made a page layout fiddle just for you.
HTML
<div class="newdiv">Slider here</div>
<div class="content">
<p>Your WordPress post stuff here</p>
</div>
CSS
.content{max-width:960px; height: 800px; background: #D3D3D3; margin: 0 auto;}
.newdiv{width:100%; height:200px; background:#BADA55;}
Solved by
<div id="slider">[slider id='32' name='']</div>
and
#slider {
position: absolute;
left: 0;
right: 0;
height: 563px;
display: block;
}
Its not the best solution. But it works!
I would just like the edges of my image to stretch the width of the screen. Not looking for it to be a full background.
My website is www.jobspark.ca
<div class="fullWidthSectionBG">
<div class="fullWidthSection">
<div class="myLeftColumn">
<p>
</p>
</div>
<div class="myRightColumn">
<h2>Used By Thousands Of Canadians</h2>
<p>Jobspark.ca is dedicated to providing resources for job seekers and employers throughout British Columbia and Alberta. Many top employers along with small local businesses from across the region post their jobs on Job Spark to find qualified professionals.</p>
<p>Job Spark simplifies your quest for the perfect career with a clean design and real-time postings. Our streamline job board was designed to take the headache out of finding a job.</p>
<p>Your job listings will be seen across multiple venues, receiving thousands of views each month! </p></div>
</div>
</div>
the CSS
.fullWidthSectionBG {
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
background-position:center;
background-repeat: no-repeat;
height:575px;
margin-left: -1600px;
margin-right: -1600px;
}
This answer was close but then the rest of the website that isn't an image extended full screen.
#site > .wrapper {
max-width: 960px;
padding: 0 50px;
margin: 0 auto;
position: relative;
}
change 960px to 100%
& get rid of
margin-left: -1600px;
margin-right: -1600px;
I have been fighting with this issue for a few days now and would be soo happy to figure something out. Might have to zoom out to see the issue.
What about adding
width: 100%;
to your css rules and getting rid of the margins ? like this
Is that your question ?
#site > .wrapper {
max-width: 960px;
padding: 0 50px;
margin: 0 auto;
position: relative;
}
change 960px to 100%
& get rid of
margin-left: -1600px;
margin-right: -1600px;
to achieve this goal i typically define a div element that fits the exact size and position i want my background image to fill.
then use the css attribute for background-size:cover; this Cover attribute scales the image automatically to ensure the entire background area is in fact "covered" by image. see the documentation here
here is a jsfiddle of an example of this method working
it is also worth noting to achieve intermittent full width areas between centered fixed width areas i like to use this method of defining a .wrapper class very similar to yours. then ending that wrapper for the full width area and once again restarting it afterwards
my adjustments to your code as follows:
CSS
.fullWidthSectionBG {
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
background-position: center;
background-repeat: no-repeat;
height:575px;
background-size: cover;
}
HTML
<div class="wrapper">
<!-- HEADER HERE -->
</div>
<div class="fullWidthSectionBG">
<div class="wrapper">
<!-- FULL WIDTH BANNER CONTENT HERE -->
</div>
</div>
<div class="wrapper">
<!-- BODY HERE -->
</div>
try it out let me know how it works - hope this helps!
I have a CSS sidebar that will display links on my website. However, it does not fill the full page height as I want. How can I make this work?
JSFiddle: http://jsfiddle.net/Pw4FN/
The easiest way is simply to do:
height: 100vh;
Where 'vh' stands as vertical height of the browser window. Responsive to resizing of brower and mobile devices.
there is a much easier way that I thought of yesterday.
Go have a look at the website I'm busy with: http://www.atlm.co.za/aboutconcepts.html and look at the sidebar to the right in blue.
This is easily accomplished by having that sidebar as the main container nad the larger white content area to the left as a floating object...
Quite simple, just remember to clear the float to have the blue main container extend down to the bottom.
<div class="maincontainer">
<div class="maincontent_blue">
<!-- Title -->
<!-- Title__end -->
<div class="mainleft">
<h1 style="text-align:center">About Concepts</h1>
<p><img src="images/aboutlogo1.png" width="500" height="284" /></p>
<p><img src="images/aboutmp.png" width="500" height="284" /></p>
<p><img src="images/aboutp1.png" width="500" height="284" /></p>
<p><img src="images/aboutp2.png" width="500" height="284" /></p>
<p><img src="images/aboutlogo2.png" width="500" height="284" /></p>
<p><img src="images/aboutlogo3.png" width="500" height="284" /></p>
<p> </p>
</div>
<p> </p>
<p style="padding-top:40px">We designed a About Concepts' new logo for them in a record time and they were greatly impressed with our service.</p>
<p style="padding-top:185px">After the logo design, they needed us to design presentational tools for their sales people. We then sat down with the Marketing Manager, Sales Manager and a few of the sales people to really understand what the company was all about and how we were to approach the project and also how we could compliment their excellent sales team with tools that would almost do their jobs for them.</p>
<p style="padding-top:600px">After satisfying their needs and after some time they >came back to us and asked us to design a new logo that would shift trends as they were >moving into new offices with a modern design. We jumped to the opportunity to greatly >improve their already fantastic logo. This is what we came up with. We later heard back >from them and all the compliments they were getting on the great new logo. They >"stood from the crowd" as the owner stated.</p>
<div class="clearfloat"></div>
</div>
<!-- end .maincontent_blue -->
</div><!-- end .maincontainer -->
That is the html I used and the css is as follows:
.maincontent_blue {
margin-top: 0;
padding-bottom: 0;
width: 100%;
background: #00D7E8;
color:#fff;
}
.mainleft {
height: 100%;
float: left;
background: #fff;
padding-top: 5px;
padding-bottom: 10px;
width: 600px;
margin-right: 15px;
margin-bottom: 0;
}
This was quite simple to do and I suppose anyone will be able to follow my code..
position:absolute;
width:100px;
height:100%;
top:0;
left:0;
the element cant be floated, or it will not fill whole page, and cant have padding at top or bottom, the padding will cause scroll. If you need the padding top, set to the child element, like UL.
I added ul and moved the padding from the outer div to margin on the ul - now the scrollbar is gone (at least I think that was the problem?)
see http://jsfiddle.net/Pw4FN/1/
I learned this from Wordpress dashboard sidebar.
Simply write these :
html{
height:100%;
}
body{
position: relative;
min-height: 100%;
}
.sidebar{
background: yellow;
height:100%;
position: absolute;
}
I hope this help you ♥
A very late reply, none of the above helped me. I have a working solution, may help someone. using a flex along with view port for min-height helps to cover the sidebar to the whole page.
this code assumes having a top-bar of height 51px;
.user-content {
display: flex;
}
.user-content .side-bar-content {
flex : 1;
flex : 0 0 220px;
background: #f1f1f1;
min-height: calc(100vh - 51px);
//min-height: 100vh; // without topbar
}
.user-content .app-user {
flex : 2;
padding: 0 0 15px 15px;
}
You cannot float an absolute positioned element. Don't forget to set the height of both the body and the html nodes to 100%, and use a padding on the body element to avoid overlapping.
body, html {
height: 100%;
}
body {
padding-left: 200px;
}