Firstly, I'm new-ish to this, so please bear with me.
I've implemented a pretty cool 'fade on scroll script' to my site.
However, what I'm looking to do is have the image at the top span 100% width like fastcocreate's site.
This is the div I'm working with:
<div class="home" style="background-image: url(http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg); background-attachment: fixed; height: 560px; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; background-size: 100% 560px;">
</div>
Now I've tried adding a 'background-size: 100% auto;' to the div, which does the trick, except this does weird things to my text. For example, if I make the browser slimmer the text doesn't move with it – so I scrapped that idea.
Next I changed it to 'background-size: 100% 560px;' which solved this issue. But created another one is that the image squashes when you make the browser smaller, or stretches it when I make it wider.
I feel I'm closer with the one above, but I'm looking for a solution to the stretching image issue. Do I need to upload an image that's bigger than the current dimensions?
As I've said earlier these guys do a good job.
it would appear that fastocreate has a min-width set to their image, have you tried a
min-width: 100%;
height: auto;
?
Im pretty sure thats what fastocreate does
best,
-b
*Also, try enabling the "inspect element" on your browser. Its super helpful when trying to mirror someone's style.
Edit:
in response to your comment, you could try making a jQuery function that would resize it.
for example
function resize(){
var height = $('img').width / 2; //sets variable height to the width divided by 2
$('img').height(height); // sets the value of the height to the variable height
};
or something like that.
Related
I have an image that I want to achieve a certain effect. Essentially as you make your browser window smaller, I want to crop off left and right side equally, so that the image is not resized and I always see the center.
I have accomplished that in the following way:
<style>
.banner{
text-align: center;
overflow: hidden;
height: 350px;
position: relative;
}
.banner img{
position: relative;
left: 300%;
margin-left: -600%;
}
</style>
<div class="banner"><img src="https://lh3.google.com/u/0/d/0B1qZWmK2ucS8ZDN3Ni02VXo2SEE=w1129-h720-iv1" alt="Image is missing" /></div>
Js fiddle: https://jsfiddle.net/szsj6f9m/
One thing I have noticed with this approach is that if I make left be 100% and margin-left be -200% the image will then half way through start sliding back to the right. I don't fully understand why, I just know that I need to make the percentage to 300% so it behaves correctly on 320px screen.
Here is the example of what I am talking about, just resize your browser small to big and you will see what I am talking about:
Js fiddle: https://jsfiddle.net/szsj6f9m/1/
My question is this:
Is it ok to have the position of the screen so far and throw such a large left-margin on it? Does this causes any kind of problems from the performance point of view on smaller devices or any devices really? Are there any reasons you can think that would say not to do this.
I personally use left:50%;transform:translate(-50%,0); (works even for vertical centering) top:50%;transform:translate(0,-50%); https://jsfiddle.net/szsj6f9m/3/
Most of my pages has a full width banner at the top just under the menu. They are created as a div with a background image from an image sprite file to reduce page load time.
My problem is that the div does not resize when the screen gets smaller, it just cuts the div of. What I would like is that the div is always 100% wide and its height scaling to keep the proportions of the background image (1300px × 300px).
Here' the code and a jsfiddle:
<div class="entry-content">
<div class="banner"></div>
</div>
.entry-content {
max-width: 1300px;
width: 100%;
padding: 0 20px 0 20px;
}
.banner {
margin: 0 -20px 0 -20px;
max-width: 1300px;
height: 300px;
background: url("http://renservice.dk/wp-content/uploads/2016/02/banner-sprites.jpg");
background-position: 0 -900px;
}
https://jsfiddle.net/fy2zh4vm/1/
I have added a code to resize the div proportionally with width. But don't think sprite image background will solve your problem.
here is a fiddle link
https://jsfiddle.net/fy2zh4vm/3/
$(window).on('load resize', function(e){
$('.banner').height(parseFloat((300/1300)*$(window).width()));
});
As I already said in my comment: I suggest you just get rid of the sprite and you can solve your problem with background-size:cover or background-size:contain.
Just in case you can't do that, I found a solution that works with sprites, but you need javascript for that (i used jQuery, but if you prefer plain JS, that should be quite easy to achieve).
The idea is that you read the width of your banner div and adjust its height and background-position values accordingly.
And here's the Fiddle
Hope that helps, but again: This is NOT the best solution, this is only the solution if you absolutely have to use sprites!
You are looking for the background-size property you have to set it to either to cover or contain depends on if you want it to cover the div tag or not.
If you want to read more here is the link
I think it's possible with raw CSS and a little hack. There is a blog post from Nicolas, where he describes how to realize background images with defined proportions.
I made you additionally a fiddle.
The percentage in the pseudo element is built by a little calculation: 100 / ( width / height ).
EDIT: don't know if it works with sprites. But maybe it's nevertheless a help :)
My team and I are making a website for an archery competition. We want to use our logo as a header, but the image has been causing us troubles: the image won't resize to fit our needs and keeps duplicating inside the container. Now, we are not wizards, but we have been searching for an answer. We have found many solutions on this website regarding resizing header images, but none of them were applicable to our problem, due to our container sizes being all-relative and the solutions we found were all aboslute. What I mean is that our container sizes in CSS are all relative, but in the solutions, they weren't.
This is my CSS work on it.
#header {
background-image:url('../files/ifaa_dutch_open_logo.jpg');
height: 40%;
width: 96%;
top: 2%;
left: 2%;
border-radius:15px;
float:center;
position:relative;
}
This is the corresponding HTML-code:
<div id="header"></div>
To further illustrate what is happening, here's a picture:
The picture
What is wrong here? We want the image to resize to fit the container, but it won't. The ratio doesn't seem to matter, for I have also tried it on a new page, where the image was exactly 1/4 of the container, it would just show four pictures, in each corner.
What are we doing wrong and how can we fix this?
I way I see it, your main problem is that the image is repeating itself, and as a result, it unable to fit the container properly. Try:
background-size: cover;
background-repeat: no-repeat;
Here's what I have: 800px width div's inside a 100% width container with a background image repeating horizontally.
Live: http://www.baskra.com
When I resize the browser window, a scroll bar is generated. When I scroll it, I see that the background image is only applied to the original unscrolled region, as seen above.
How can I solve this problem?
JSFiddle: http://jsfiddle.net/wcdXK (Not every image is working, but I believe the most important here is the CSS.)
You should replace the "width: 100%" from .pages-container CSS class with a "min-width: 800px" – it will force background to be the same width as the container if the window size becomes less than 800px.
.pages-container {
background-attachment: scroll;
background-image: url('http://baskra.com/images/bg/bg-scroll.png');
background-repeat: repeat;
min-width: 800px;
left: 0;
}
Check it here : http://jsfiddle.net/wcdXK/3/
Because the width applies to the area of the containing block, as the overall container is smaller the background shrinks to apply to the same area (along with the pages-container element).
I noticed you are experiencing many problems on your layout (you posted a similar question)
You should read a Responsive Web Design article trying to understand media queries
like this (random picked from google) http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/
So I'm looking to add a footer to my page but I want it to be a background-image that is automatically resized depending on the monitor resolution and have it with a 100% width and height but to never overflow to the sides, so I don't want scrollbars to appear. The image is .jpg.
Would appreciate some input as to what is the best way to go around this
Use the following CSS
div {
width: 100%;
height: 400px;
background-image: url(your-path-here.jpg);
background-size: 100% 100%;
}
And see this live example
Be careful, if you don't resize the height of your footer as well, that will stretch the image.
background-size will do the trick, but note that it' not supported by IE8 and older. Just to be on the safe side for these browsers, the image could be positioned in the center (that means at 50% horizontally and 50% vertically - of course, the center keyword also works)
Live demo: http://dabblet.com/gist/2790711