Maybe this is not the right stack to ask this question, let me know please if I have to change it.
Basically I'm having a problem with a css background that doesn't take the hole height of the page, and since I have a background image repeating, it doesn't look good at all.
The code structure is something of this kind:
<div class="bg">
<div class="wrap">
<wordpress loop>
</div>
</div>
The background is out the wrapper cause the image is bigger and is mean to cover the 100% width of the page.
CSS:
.bg {
width: 100%;
background: url(imagelink) repeat-y center;
height:???? I SET 500px for display the sample of the issue.
}
.wrap {
width: 960px;
margin: 0px auto;
}
The main line is that the article can be different size, in this sample http://www.villa-frankrijk-provence.nl/de-provence/de-provence-1/ would be something like 3300px, however in other pages it's something like 500px, so I cannot use a fixed number.
I would like the background image to get the hole height, any suggest???? I will really appreciate your help as always :)!
Regards
Remove the height declaration on .bg and add this after #page-text-single (i.e. after <wordpress-loop>) in your HTML:
<div style="clear:both;"></div>
Floating items won't cause their parent elements to resize, but you can force them to do so using a non-floated element directly after the floating content.
Dont specify a height or try height 100%.
Not sure this is what you want:
.bg-contact3{overflow:hidden;}
Related
Quick question:
How do I create a layout where all the elements' backgrounds stretch across the width of the screen, but the content stays narrow, let's say 1000px? I'm looking to come up with something like this:
https://themeforest.net/item/itcore-site-template/3638733
For the record, I know how to code, I just don't know what the best approach is to this. I'm sure there's a 'best practice' to achieve this and having built 100% width dashboards only, I never worked with it.
Any tips?
You simply combine two elements, one that will fit the window (on which you can apply some background and other styling that cover the viewport), and another container in the center of the page. I recommend you to use max-width to allow it to shrink on smaller devices.
<div class="section">
<div class="wrapper">
Some content
</div>
</section>
Then your CSS is as simple as
.section {
background: (...)
background-size: cover; /* stretch to cover the whole container */
}
.wrapper {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
Take a look at CSS Background size property. You can specify a fixed value in units, for example:
background-size: 100vw;
which would occupy the width of the screen.
Thanks LeBen, that's what I was looking for. I ended up creating a wrapper class that can be used for all elements and is styled using individual classes. Inside goes content like header, main, footer etc. and these are scaledwith media queries according to screen resolution.
<div class="wrapper bgLight">
<header>
Header content goes here
</header>
</div>
Thanks again!
I'm using centered imgs to act as backgrounds for some tiles. I'm trying to have these images scale with their parent div's height and if they are wider then their parent's for them to hide the overflow.
Example:
* I've got it working now. Answers are below, I'm updating this code to display all I needed to use to get it to work *
HTML
<div class="container">
<img class="derp" src="http://gridiculo.us/images/kitty02.jpg">
</div>
CSS:
.container {
height:250px;
width:50%;
}
.derp{
object-fit: cover;
height: 100%;
width: 100%;
}
Here's a near-example: http://codepen.io/chriscoyier/pen/myPMGB
The difference would be that I'm using s and not background-image, and that instead of the img filling the div completely it would fit to the height and hide the width overflow.
I'm trying to avoid using background-image since I'm using a lot of these tiles and making CSS rules for every one isn't going to work.
In order to scale it with the div's height, I'd change the height from px to % - this way, the larger's the div, the larger's the picture. In order to certain the image, i'd use margin in the image css. That'd look like so:
.derp{
height:80%;
width:80%;
margin:10%;
}
.container {
height:250px;
width:50%; /* needed */
/* inner img is centered horizontally */
vertical-align:top;
text-align:center;
overflow-x:hidden;
}
<div class="container" style="background-color:gray"> <!-- The background is there so you could see the image relative to the div -->
<img class="derp" src="http://gridiculo.us/images/kitty02.jpg">
</div>
The best way to keep the aspect ratio of the image is to set the width to auto (and it's the default behavior so you don't need to set explicitly). And with a simple overflow:hidden it works almost as you want it.
The hard part is centering horizontally. You can try this answer :css to center a image horizontally.
However if all your images aren't the same size, you will need to make one rule per image. And in this case putting the image as background-img would be better for semantic and accessibility (because your image doesn't have a sense in the page, it doesn't convey any information, it's decoration). An <img> would be read by a screen reader (the alt attribute), and in your case it wouldn't help a blind people.
Depending on how many browsers you need to support, I'd suggest you use object-fit! Support for it is okay if you can ignore IE, but in case your project qualifies, I see no problem with using it today. Also, there is always a polyfill.
You can find a nice summary on CSS-Tricks.com about the property. It basically works similarly to background-size, but for <img> tags. In your case, object-fit: cover; does the trick.
I made a little demo on CodePen that shows you how it works.
img {
height: 100%;
object-fit: fill;
width: 100%;
}
I've been beating myself this weekend to get around this one.
I have a site that uses Bootstrap 3.0 and a Carousel with background images, and I've managed to reproduce my question in a small fiddle.
I have a max-heighted div with an image inside. The image will typically be larger than the div (at least in height). I'm using the img-responsive class from bootstrap to make sure that in mobile browsers the image scales down. That is the reason why I max-height the div and don't put a fixed height on it.
My questions is: how can I get the image to vertically align to the middle?
I've tried:
Adding classes display: table and display: table-cell, but a table cell cannot have a max-height.
Aligning things vertically but none seem to work.
Setting a negative margin on the image using javascript, but that makes the div smaller as well as the div uses the image to size itself.
Using css background instead of an inline image. This does not make the div be (at most) as large as the image and doesn't allow responsive growing/shrinking.
Fiddle: http://jsfiddle.net/SabbeRubbish/dZQ26/4/
<div class="carousel-inner">
<div id="frame" class="item active">
<img src="https://www.google.com/images/srpr/logo11w.png"
class="img-responsive" />
</div>
</div>
Can anyone recommend me good and clean ways to get the image to center vertically? Or tell me what the hell I'm doing wrong? :-)
Thanks.
PS: why center vertically? If the page is very wide, there is a large clip area as the image grows with the page. It is nicer to show the middle of the picture rather than the top.
is this something closer to what you are trying to achieve ?
#frame {
border: 1px solid grey;
max-height: 100px;
min-height: 100px; /* Remove this line */
padding: 15px 0px; /* Add this line to always have height on the div */
background-size: cover;
background-image: url(https://www.google.com/images/srpr/logo11w.png);
background-position: center center;
}
http://jsfiddle.net/rrEYJ/
EDIT:
As suggested in the comments you can also use background-size: contain; to have the entire image inside the #frame element. You will probably have to also use background-repeat: no-repeat; in that case.
Check this fiddle: http://jsfiddle.net/rrEYJ/1/
EDIT2:
Based on your comment I did some research and apparently the background-size property can be set in percentages also. Based on this new information see this fiddle:
http://jsfiddle.net/rrEYJ/3/
EDIT3:
The css had a min-height property that's why the div wasn't changing it's height. Check this fiddle: http://jsfiddle.net/rrEYJ/4/
I hope this helps.
Add style for image like this
#frame img {
width:auto;
max-height:100px; }
I have a div which has a responsive image in it that is full width.
The height of the image and width adjusts as the browser resizes.
I would like to position another div right below this div that has the responsive image.
I can't seem to get it right.
Here's what I have:
<div style="display: block; width: 100% !important; height: auto; display: block; background: #ffffff; text-align: center;">
<div style="display: block; min-height: 374px;">
<img src="yahoo.png" title="THE RESPONSIVE IMAGE" />
</div>
<div style="width: 100%; height: 10px; background: #D9594C; position: relative;"></div>
</div>
You can see the div I want to position below the responsive image has a background.
Thanks so much for your help!
It's hard to say for sure, but I think there's confusion here around the height and the responsiveness.
Firstly, the reason you get that big gap under your image is because it's parent div has min-height: 374px set on it. The div will expand to fit the image's height, so this isn't really needed.
However, you also talk about how the height and width of the image should adjust when resizing. To do that, you'll need to make sure the image has width: 100% so it is only ever as wide as it's parent div.
I've separated out your HTML and CSS, and added comments in the CSS to try and help.
Hopefully, it's close to what you wanted.
http://jsbin.com/orahuPEh/1/edit
If I am understanding your question right, your problem is that your divs are not butting up against each other properly. Is this correct?
Since you are obviously at the point where things aren't necessarily working right anyway,
I would start by setting the height of the img's parent div to the actual height of the image.
If this does not work use negative margin on either of the divs:
div style="margin-top:-30px;
Hope this helps, let me know if there is anything I can clarify.
Don't give the height of the image div, keep it height:auto, div will take image height. As you mention its responsive image than div will take height as per image height.
<div style="display: block; height: auto;">
working Demo
First of all I would like to thank you all for your answers all this time. I have found a lot of solutions from my projects through the site as a student as well as a working.
I search a lot before asking this question but I couldn't find a working solution.
Sorry for the title. Couldn't think a better one.
I try to develop a site and I have a problem with the header. The main page container has a fix size of 1024px and the content inside is restricted to 960px. Only the header and the footer takes the whole wight of the window.
I have two images: The first one is 2000x250 (the buildings behind) and the second one is 2000x58 (the languages with the houses).Let's name them img_A and img_B respectively. I want both of them to take the whole wight of screen depending the user resolution (like the footer) but scale it also to responding to the height.
The problem is that I want no matter the screen resolution is, the img_B to be centered inside the 1024px so the ES button will be at the end of main page (1024px) so the logo that is center with margin 0 auto; don't cover the houses.
Here some images to illustrate better what I am asking.
Wrong (1920x1200):
http://imageshack.us/photo/my-images/577/headerwrong.jpg/
Right (1680x1050):
http://imageshack.us/photo/my-images/20/headercorrect.jpg/
Here is my css code:
#header{
height: 140px;
width: 100%;
background: url(images/background_home.jpg) center center no-repeat;
}
#header .language_banner{
background: transparent url(images/header_en.png) right bottom no-repeat;
}
#header .logo{
display:block;
width:242px;
margin:0 auto;
padding-top: 63px;
}
and the html code:
<div id="header">
<div class="language_banner">
<div class="logo">
<img alt="athens insiders" src="<?php bloginfo("template_directory"); ?>/images/logo.png">
</div>
</div>
</div>
Thanks in advance
I don't quite understand what you're trying to achieve, but I think you want to try looking at (and adding!) the background-size css (and maybe background-clip) property to your #header (or wherever), after you define the background.
Note the support isn't there in earlier versions of IE, so you may need another work around if you're going for universal compatibility.