(Source:http://imgur.com/5pKaiea.)
Hey I basicly got two of the files above one "header" and one "footer" both same size kinda just flipped.
The problem is the width doesn't fit on page, any ways other than background-image: cover?
The file is basicly 1280 px wide and around 114 px tall.
div #header {
background-image:url(../img/webclient_header.png);
height: 114px;
width: initial;
margin: 0; /* If you want no margin */
padding: 0; /*if your want to padding */
}
In CSS you can use the property background-size to resize the image to fit:
div #header {
background-image:url(../img/webclient_header.png);
background-size:800px 114px; /* Choose your size here W x H */
height: 114px;
width: initial;
margin: 0; /* If you want no margin */
padding: 0; /*if your want to padding */
}
UPDATE: Checkout the code update on jsfiddle http://jsfiddle.net/bKZ8N/
If you're looking to have responsive images on your website, background-image is not really the best path to take. You'd need to either use may CSS media queries to serve different background images sizes or use something like background-size property which is not compatible with older browsers.
I would suggest doing something like this:
<header>
<img src="you-image.jpg" width="100%" height="auto" />
</header>
That's a lot going on for one header / footer image... I would look into possibly breaking it up.. You can make the center part a set width of the whole site that would essentially contain the menu. Then after that you would cut a 1px width (x-value)px height and use that as a repeating background behind your header div. The other elements can be strategically planned to be added to other portions of the site to better reflect the image.
Not a great answer, but it is what I would do in this situation. Otherwise you're looking at the image being stretched and possibly lose some focus.
EDIT:
To answer your question in comments
Kind of...
So you would have at least 3 images header_middle_piece.jpg (the middle of the image that is pointing "down"), footer_middle_piece.jpg (the rotated version of header.), and repeating_pattern.jpg
From there you would have your leveled layout.
<div id="header">
<div id="container">
<div id="content"></div>
</div>
</div>
Use the same type of layout for your footer.
#header{
width: 100%;
background: url('repeating_pattern.jpg') repeat 0 0 scroll transparent;
height: 20px; // Make this the height of the pattern you are using.
}
#container{
background: url('header_middle_piece.jpg') no-repeat 0 0 scroll transparent;
height: 40px; // height of the middle piece.
width: 200px; // width of middle piece
margin: 0 auto; // center the container.
}
Those are the only styles you need to get that working in the whole. After wards you would need to target the background for the repeating background of those stripes if you still do those, and make a div for the other shapes. If you didn't make this image you will have a hard time breaking it up. But it is doable.
Related
Started playing around with SVG and am having trouble getting it to position the way i want to. What I want to achieve is for my SVG to come in front and locked to the bottom of the border-div and be centered on the page as well as resize when the window is resized (responsive). So far I've played with the viewbox and height/width properties of the SVG to get the responsive behavior but I can't figure out to not have the SVG slip under the rest of my page(see picture to have a better idea of what's hapenning). I tried to play with the z-index and position:absolute but to no avail. Here's what I have so far for my code: (I use the bootstrap framework with SASS)
HTML
<section>
a first section
</section>
<section class="parallax1">
<div class="container-fluid">
<div class="row">
<div style="height:500px;">
<div class="col-sm-12 border-div">
<div class="col-sm-12">
<svg xmlns="http://www.w3.org/2000/svg" class="svg-test" viewBox="0 0 500 375">my SVG</svg>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
Another section
</section>
CSS
.border-div{
height:100px;
background-color: $orange-background;
}
.svg-test{
left: 50vw;
width: 100%;
height: 600px;
}
.parallax1{
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("../images/bkgnd.jpg");
}
What i get right now is something like this:current result
And what I am looking for is this:desired result
Preliminary remarks
A few remarks about your problem, which may also explain why you haven't received any answers in such a long time:
Your problem is about the positioning of an SVG image in an HTML document. Playing around with ViewBox won't solve your problem, as this merely dictates what the SVG image should show, and not how the SVG image should be positioned within a parent document, in this case a HTML document. In fact, you could replace the SVG image with a DIV countainer and nothing would change about the solution.
It isn't really clear what you want:
Does come in front and locked to the bottom imply that you want the SVG image to appear when the user scrolls, or with some animation? Or does it mean you want the SVG to be placed there statically, independent of any event?
Does centered on the page mean horizontally only? If you meant also vertically, I don't understand how it should be in relation to the height requirements of the DIVs, or the requiement that it should lock to the bottom of the border-div.
And does resize when the window is resized only mean change its width or also its height? Because you've defined the height as 600px, which clearly won't respond to any resizing of the window.
slip under the rest of my page - I thought the SVG should be on top of everything else?
It's not clear whether the first and the last sections should have a stable width, or be responsive. And how they should relate to the 500px. A bit of CSS for them would be good.
So the 100px of border-div should be part of the 500px? In the "screenshots" it doesn't seem like it, but the code you posted suggests so.
Also, there are some inconsistencies in your formulation of the problem:
The width of the SVG is defined as 100%, but your pictures show that it's clearly not 100%. After all, if it were 100%, you wouldn't have to worry about centering it, either.
The height of the SVG is defined as 600px. If that was the case, it would be taller than the parent DIV, which is only 500px. The pictures show something different.
Last but not least, left: 50vh will make your SVG start at the horizontal center of the page, and not center it. If you want to center it, it should be (100% - width)/2 and not 100%/2.
Possible solution
In any case, here's the HTML code and the accompanying CSS styles to get what I (possibly incorrectly) interpret you are asking for:
<section id="first">
A first section
</section>
<section id="height-500">
<div id="border-div">
<div id="relative">
<div id="bottom">
<svg>
</svg>
</div>
</div>
</div>
</section>
<section id="another">
Another section
</section>
And here the CSS:
#first,
#another {
background: #808000;
height: 150px;
width: 100%;
height: 150px;
}
#height-500 {
background: green;
height: 500px;
position: relative;
}
#border-div {
background: #008080;
height: 100px;
position: absolute;
bottom: 0;
width: 100%;
}
#relative {
position: relative;
width: 100%;
height: 100%;
}
#bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
svg {
display: block;
background: #f00;
width: 20vw;
height: 20vw;
margin: auto;
}
Explanation of key points
Setting the position: relative of #height-500 allows you to position #border-div at its bottom. This trick will be used again for #relative and #bottom to place the SVG at the bottom of #border-div (setting width and height to 100% allows the dimensions of #relative to be identical to #border-div).
Setting the width and height of the SVG to 20vw indicate that we want the SVG to be a square, each side being 20% of the viewport width. If you change the width of your browser, the SVG will resize too.
margin: auto are used to place block elements in the horizontal center. Note that we need to turn the SVG into a block element for this to work, by setting display: block. (Note that margin: auto doesn't work for really old browsers, but there are workarounds with some additional DIVs.)
If you want the height of the SVG remain the same, you may want to play around with the preserveAspectRatio attribute to indicate you you want to deal with the changing aspect ratio.
Note that the viewport width vw also includes the scrollbar and isn't supported by some older browsers. However, there are other methods of keeping the aspect ratio, in case that's a requirement for you.
I've been presented with the following layout:
where:
A = header, width: 100%
B = page content, max-width: 960px; margin: 0 auto
C = footer, width: 100%
The problem I've got is with the H1. The design has a background to the H1 which comes in from the very far left of the screen and stretches all the way across to line up with the right hand side of the content below. If the browser window is less than 960px then obviously it just appears as a solid bar stretching across the whole screen.
I'm genuinely at a loss for how to even start this. I thought about some kind of negative left margin + padding left but without knowing a fixed size it's hard to rely on percentages to accurately line up the elements.
The closest I think I've come to a solution is to have a massive background image which is centred on the H1, or maybe on a container surrounding the H1. Not ideal as it's just a solid colour so to use an image goes against my moral judgement.
Any ideas? Here's the structure of the page:
<header>
<h1>This is my title</h1>
</header>
<article></article>
<footer></footer>
CSS
header,
footer {
width: 100%;
min-height: 100px;
background: #eee;
overflow: hidden;
}
article {
margin: 0 auto;
max-width: 500px;
height: 100px;
background: #ddd;
}
h1 {
margin: 30px auto;
width: 500px;
background: #bbb;
}
There are several ways you could try and do this.
A jQuery solution would provide the most accurate result, but it's abit heavy for this kind of problem, and I personally don't like using Javascript for something that's a CSS problem.
You could do some kind of trick with a background image, you might have to depending on your actual design, but as far as a single background colour, I'd probably solve the problem with an element positioned behind the header with a negative margin-top, and a set width of 50% (That way it should always remain hidden behind your header). All you'll need to do is match up its height and margin-top to blend it in with the header.
.header-botch {
background: #bbb;
height:37px;
width:50%;
margin-top:-67px;
}
http://jsfiddle.net/duFnR/1/
If for some reason you hate the idea of using a negative margin, you could position: absolute the element instead
http://jsfiddle.net/duFnR/2/
Why not use jQuery and calculate H1.width = (B offset left) + B.outerWidth() ?
A solution which doesn't involve images appears to be wrapping the H1 in something and applying a background gradient to that element, see the fiddle. I've made the H1 background green to make it more obvious which background colour is which.
Pros:
Ability to manage the colour in CSS
The height is variable based on the height of the H1 allowing for multi-lines if necessary
Cons:
The width must be set no greater than that of the H1, otherwise on very thin windows it will appear out the other side. Also it has the weird behaviour of disappearing completely once the specified width has been reached (not a problem when smaller because you won't see it disappear).
On very large windows, the width will not be enough and a gap will appear on the left of the H1.
Code
<div class="h1Wrapper">
<h1>This is my title</h1>
</div>
CSS
.h1Wrapper {
/*background: #bbb;*/
background-image: -webkit-linear-gradient(left, #BBBBBB 300px, #FFFFFF 300px);
background-position: center;
}
h1 {
margin: 30px auto;
width: 500px;
background: lime;
}
For example, I want this page to have the footer fill to the bottom of the page, but I want this page to behave how it does now - so the footer cannot be fixed. I'd prefer to not use JS simply because $(window).resize() is expensive and performance is a concern for us.
Our lowest supported browser is IE9, Firefox 13, Chrome 16 and Safari 5 so I'm not concerned about using a more advanced solution, though probably not bleeding-edge.
You can't - you have to either calculate the window height and footer top offset (which involves JS), or fix the position of the element to bottom: 0.
You could make the page background color match the footer color, and instead of using the graphic as the background for the whole page, make it only for the content area.
so put the background on main-content-container
and make the body background color #EBEBEB
Here is a way to do it, but it does bring other problems with it. You will need to set a min-height and make sure your content does not exceed that min-height or it may get cut off and all text must be at the top of the second div.
The css:
body,html
{
width: 100%;
height: 100%;
}
div#wrapper
{
overflow: hidden;
height: 100%;
min-height: 600px;
}
div#one
{
background-color: #0ff;
height: 200px;
}
div#two
{
height: 100%;
background-color: #f00;
}
The html:
<div id="wrapper">
<div id="one"></div>
<div id="two"></div>
</div>
So the content on the bottom, would not be able to exceed 400px in height in this example. But, if it was larger than that it would be filled in by a solid color.
They say, that a single picture can explain more than a tousand words, so here's my "more": http://www.imagebanana.com/view/hcqsz5fs/cols.png
My goal is to have the columns as shown on the image, with them together having 100% body width.
And my fiddle is here: http://jsfiddle.net/c2JH3/ (note that this is just a mockup of my current work).
How can I achieve this?
A Quick Note
In your comments, you are saying that you can't use a background image because the height is variable.
The way to fix this is using multiple images, and tell them to repeat or not to repeat on different parts of the page. But I'll go over this after I answer your question directly.
Short Answer
To get 100% body width, you'll want to use percentages (%) on for your width rules. Like this:
#left {
width: 60%;
}
#right {
width: 40%;
}
Fixing Some Problems
One problem you are bound to encounter when you have content that passes the bottom of the screen. In this case, you need to tell the divs to stay side by side.
This should do the trick:
#left {
position: absolute;
top: 0;
left: 0;
width: 60%;
}
#right {
position: absolute;
top: 0;
right: 0;
width: 40%;
}
Back to the Note
Believe me, you don't want to be using percentages on your widths. It makes sizing and scaling extremely hard to design nicely, and changes that you try to make in the future probably won't work without a complete redesign of your css.
Like I was saying before, you want to use multiple images. You'll have background image on the body tag that - going by the design you provided - has the gray-to-orange fade in it. The css would look like this:
body {
background-image: url('path/to/header.jpg') no-repeat;
}
You would then have a wrapper div like the one you already have, that holds the content and such. Inside the wrapper you have:
A header (the logo and navbar), which would have no background (so you can see the body background).
A featured section which holds that really big image in the middle. You can use negative margins to get it centered.
A subnav section for those images in the middle. This would have it's own background image that has a matching part of the background of the body so that it appears to flow in as the image does.
A content section that holds all of the content of the page. This would have an image repeating vertically to look continuous.
#content {
background-image: url('path/to/slice.jpg') repeat-y;
}
A subfooter section that has the curved part of the page (that gray-to-orange curve at the bottom).
And finally a footer section that has all the stuff on the very bottom.
You can use the same structure on the inner pages, you would just use different images and spacing to change the look of the page.
To Sum Up
You will never, ever need to have a 100% width for your wrapping div. (I say this to generalize, there are certain styles that use this, but they aren't the same kind of design).
What you should always try to do first is create images for the body, header, content, and footer sections that create the look you want.
Then have your wrap be a set width in pixels that will stay in the center of the page, while the margins increase and reveal more of the background image.
Have fun and good luck with your design!
I don't know how to use fiddle. But this worked out fine for me.
I just used the background colors and borders to properly show the differences
<!doctype html>
<html>
<head>
<title>xxx</title>
<style>
body{
margin: 0;
}
#wrap {
width: 100%;
}
#left {
width: 600px;
float: right;
border: 1px solid #000000;
}
#right {
width: 350px;
border: 1px solid #000000;
}
#container_left {
width: 55%;
float: left;
background: red;
}
#container_right {
width: 45%;
float: right;
background: blue;
}
</style>
</head>
<body>
<div id="wrap">
<div id="container_left">
<div id="left">
<p>Content</p>
</div>
</div>
<div id="container_right">
<aside id="right">
<p>Sidebar</p>
</aside>
</div>
</div>
</body>
Cheers!
Thank you all for your answers and ideas. They were helpful and I did learn something new (my biggest 'thank you' goes to #Jon for a really great, great post). But, since I can't solve this neither with percents nor backgrounds (since my design is a little more complicated that the one provided), I made my way with jQuery. To sum up, here's my mockup fiddle.
Note: sometimes you'll need to change left 125 to 126, just to make sure both ends meet.
I want a <img> whose width is 40% of the page, and it gets stretched.
How can I resize it without stretching?
For example, if I have a image whose file originally looks like this:
____8888________
____8888________
____8888________
In my webpage, normally, it should looks like:
____8888________
____8888________
____8888________
As soon as I make the browser a little more narrow, the max-width(let's say 10 characters in this example) would take effect.
When that happens, I would like it to be:
____8888__
____8888__
____8888__
(just like it's been cut from the right side. Of course from both sides are better),
Rather than:
__888_____
__888_____
__888_____
Any trick (putting it into a <div>'s background) is okay.
Width and height are unknown.
Thank you all for your previous answers, but, sorry, I think I haven't put enough emphasis on "After limiting its width to 40% of the page", which means before width-limiting it should looks normal.
The trick is to put the image into a containing block element, eg a DIV. Once inside set the width of the image to 100%, this will instruct the browser to fit the image width flush with the left and right edges of the DIV.
You then control the width of the DIV via CSS, I find keeping the image in a block element makes manipulation much easier when creating fluid layouts.
Example:
img.stretchy {
width: 100%; /*Tells image to fit to width of parent container*/
}
.container {
width: 33%; /*Use this to control width of the parent container, hence the image*/
}
<div class="container">
<img src="http://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="stretchy" />
</div>
If you wan the image to be clipped/cropped in any way, set it to be larger than it's parent, and set the parent's overflow css to hidden.
Example:
img.clipped {
width: 150%; /*Scales image to 150% width of parent container*/
float: left; /*Floats image to left of container - clipping right hand side*/
float: right; /*Floats image to right of container - clipping left hand side*/
}
.container {
width: 33%; /*Use this to control width of the parent container, hence the image*/
overflow: hidden;
}
<div class="container">
<img src="http://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="clipped" />
</div>
Hope this helps...
Add this class to the img html tag, it will keep the image as it is, but will take the necessary specified space ie.40% x 40% without stretching the image
.img{
width:40%;
height:40%; //change to whatever your choice
/*Scale down will take the necessary specified space that is 40% x 40% without stretching the image*/
object-fit:scale-down;
}
Here's a few options. (see the demo of all these options here: http://jsfiddle.net/Squeegy/Gcrdu/ )
The first as a plain image of unknown size. This displays at whatever size it happens to be.
<img src="http://www.google.com/logos/classicplus.png">
But as it turns out, you can preserve the aspect ratio of an image if you only set the width, or only the height. The other dimension will adjust itself to keep things from stretching.
// HTML
<img src="http://www.google.co.jp/logos/classicplus.png" class="aspectshrink">
// CSS
img.aspectshrink {
width: 100px;
}
But when you use CSS background images you can do some creative cropping based on where anchor the background.
This says "Go"
// HTML
<div class="cropped-right"></div>
// CSS
.cropped-right {
width: 100px;
height: 100px;
background: url(http://www.google.com/logos/classicplus.png);
background-position: left center;
background-repeat: no-repeat;
border: 1px solid red;
}
And this says "gle":
// HTML
<div class="cropped-left"></div>
// CSS
.cropped-left {
width: 100px;
height: 100px;
background: url(http://www.google.com/logos/classicplus.png);
background-position: right center;
background-repeat: no-repeat;
border: 1px solid red;
};
Try to use ImageResizer.
Here's the link : http://imageresizing.net/
Do you mean cropping the image? If so look into CSS overflow property. Also you could put it into the background and centre it in the div