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;
Related
I'm currently in the process of building a website and I am running into some trouble. home_page_ideal is what the page is supposed to look like ideally. My issue is with the little boxed image on the top left. When I scroll all the way up, the page looks like home_page_issue. The CSS related code is:
.logo {
padding: 38px 0;
}
img {
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
The bootstrap classes col-md-2, col-sm-6, col-xs-12 are also used for one the parent div. Not sure if it's relevant, but I figured it wouldn't hurt to mention it.
I would like the image to stay boxed on the top left of the page when one scrolls all the way up. I had a dummy image on there before and everything worked fine, but then I replaced it with the actual image needing to be there and this happened.
Could it possibly have something to do with the size of the image? I'm not sure but any help, hints, or lead would be greatly appreciated.
Give it a max-width or max-height so that way it won't get larger than a certain size. The auto makes it take up the width of the parent, and if the parent is col-xs-12, it'll be full screen.
Finally figured out what was wrong. It had to do with the size of the image so once I resized my logo everything was back to normal. The dummy img I originally had was 134 x 32, and my logo when I did the replacement was 1400 x 1235. In other words, my logo was just too big.
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/
if you could take a look for a moment at http://www.acehbus.com, you could see that the screenshot image of iPhone is fully seen in the screen. I want to know how to make the half of the image overlays the next div like in the http://sociali.st. I have tried z-index but it doesn't work. Thanks you for your help.
I got through your site, and I have two things:
1) dont use images with resolution of 649x1323. Half of that size will ok .. there are many of images of this phone, and people with slower connection will die on this. And it is still used only as smaller thumbs, so large resolutions are really not necessary.
2) You use the image as itself. Use div instead and give image as its background. See this fiddle:
https://jsfiddle.net/8xhucpx8/
div.image{
width:300px;
height:200px;
background-image:url('http://www.acehbus.com/img/search.png');
background-position:top center;
background-size:100% auto;
background-repeat:no-repeat;}
You can do that using overflow: hidden first give a fixed height to the parent element of the image in your case col-md-6. So do something like.
.col-md-6 {
height: 155px;
overflow: hidden;
}
<div class="col-md-6">
<img src="http://www.acehbus.com/img/search.png" alt="" width="200px" />
</div>
First of all, you may always inspect a site with effect you want to achieve and try to apply it's approach in your project. The markup and styles are at direct access. If you noticed in the example you've provided the overlapping effect is achieved with combination of negative margins and absolute positioning. So if you play with these properties you gonna make it. I would go for something like this:
<div class="iphone"></div>
.iphone {
bottom: -100px;
position: relative;
}
Look, I made some experiments and made this fiddle
Currently working on a landing screen where users choose a colour theme on the site. There are two coloured sides that 'grow' on hover giving the effect of colouring the website seen on a mockup infront. (Check out the Codepen below to get what i mean, it's kinda hard to explain fully)
Demo: http://codepen.io/BAWKdesign/pen/PPvRjz/
To 'color' the mockup two images are used placed over one other.
It needs to be responsive so I've given the back image width: 100%; height: auto; which is also used to dictate the size of the parent div.
The top image is set to width: auto; height: 100%; as using width 100% causes the image to stretch and not clip.
The problem is, the overlaid image appears larger in size as you can see in the link below giving a cut up image effect. Perhaps there are differences in how the size is calculated when you swap 100% and Auto around?
Hopefully this is just me having a brain fart and I've made a rookie mistake somewhere!
Images are by default inline elements meaning they naturally have some spacing around them. You are setting your other images to position: absolute which causes them to display similar to a block element - ie. no default spacing.
Simple solution is to add display: block to your image element:
.img {
display: block;
}
Updated CodePen
I want to create a page with vertically centered content (I'm using this method). I need to use two different page backgrounds. One is assigned to html tag and the other one to the body tag (it doesn't matter if I'll create div's instead). The first one is a background picture (full width & height of the view port, fixed, no-repeat) and the other one is just a pattern, intended to overlay the picture (repeat). I tried to use CSS3's multiple backgrounds for this case, but it didn't worked as I intended.
The problem is that when the content exceeds the view port, the body's background covers only the height of the view port. The solution for this is quite simple:
body { min-height: 100%; }
But it comes with a serious drawback. If I set the min-height value while the content doesn't exceed the view port, it won't be vertically centered.
I created a fiddle to help you better understand my problem. Don't mind the JavaScript as it does not play any role in this case. I used 1x1 px background images as an example.
Try to toggle the content's height while the body's height is set to 100% and scroll down. You will see what I'm talking about. You can fix that by toggling the body's height, but as soon as you toggle the content's height back to auto it won't be centered vertically any more.
I want the body's background to cover the full page height and have the content positioned in the middle no matter if the content fits in the view port or not. I've tried to achieve that for several hours and I failed, so maybe some of you know something that I don't and could help me with that.
Here is what I came up with:JSFiddle
I avoided your problem by making the .block div the size of your screen by fixed positioning. After this I used the .block div to scroll the elements inside. Hope this solves your problem ;).
.block {/*made .block fullscreen size so you cannot scroll the page anymore, but scroll this div instead*/
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
overflow-y: auto;
If you don not need < IE9 support, you can use transforms to do that.
http://jsfiddle.net/0tgvrw3k/1/
Basically you don't need the .block and make the vertical alignment using top, left, and transform. You need position: fixed;, as position: absolute; will make the viewport scroll.
Please do not forget to prefix the transform with -webkit-, -moz-, -ms- and -o-