Before i shoot my question and someone shoots me after:
I most likely searched the entire web to solve my problem, as i'm here...you will understand that my problem isn't solved by now...
I'm so frustrated cause...there is not 1 solution but many! All of them have pro's & con's. I'm a person who always looks for logic...and we all know in webdeveloping, there is not much or none at all.
I'm looking for something simple, very simple. - A header image that is responsive. I've inspected many many websites that are a great example but they ALL use something different. From Background-size:contain to table-cells. Let me shut up now and explain my frustration.
This is what i would like to get:
Link 3 It doesn't have to be a video..just a image...
I would like a header that uses a background-image where i can place text on (Centered horizontaly & vertical) top of the background image. I also would like the image to be responsive. I achieved something close but i don't think i'm doing it the right way cause i'm using a fixed height for my image. I don't find another solution cause if i don't put a height, nothing shows up.
This is what i have:
My Website
I hope i make myself clear...
Can someone help me! Please??? Pretty please???
Please check this fiddle: http://jsfiddle.net/gszzapsd/6/. Is this how you want the header to function when you reduce the size of the screen? The bellroy.com website which you've quoted, they are actually using an image with 100% width and auto height and then the text which says LIVE LIFE OUTSIDE is positioned absolutely over it. This is how their code of that particular section looks like:
<div id="landingCover" class="snow">
<img src="http://assets.bellroy.com/skin/frontend/default/bellroy/images/elements/snow/cover.1405318855.jpg" alt="" class="hidden-image" width="1348">
<div class="landing-fixed-header skrollable skrollable-between" data-0="top:0%; opacity:1" data-top-bottom="top:15%; opacity:0" style="top: 0%; opacity: 1;">
<h1>LIVE LIFE OUTSIDE</h1>
<h2>EXTRA WALLET PROTECTION FOR ALL WEATHER CONDITIONS</h2>
</div>
</div>
Nevertheless, if you'd like the background-image of your header div to scale based on the size of the browser window, please add these styles to the CSS of #page_title on your website:
#page_title {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
Related
I’m working on a website for my business at the moment.
I’m pretty much done, but the header (inside the main but before the content div) image isn’t resizing when on mobile, meaning that the user can scroll horizontally and it totally breaks the responsiveness.
Code at https://GitHub.com/Maestoso-Digital/MaestosoWebsite, and website at https://maestoso.uk.
How can I fix this?
On a less technical side, what are your thoughts on the design? Are there any changes you would recommend making?
I’m fairly new to web design and CSS in general, so sorry if this is really basic or the design looks a bit amateurish - we’ve all got to start somewhere 😊
Thanks in advance.
Since the background is an img and not an actual background-image or even a background, set the display to block and give it a width of 100% so that the image will resize with a width of 100% based on the screen width
#header-img {
display: block;
width: 100%;
}
If you're looking for feedback and suggestions for the site, head over to ux.stackexchange you'll have more luck there
I am trying to see if I can find a way to use CUSTOM CSS or HTML for my website's logo on Squarespace. The maximum pixel count is 320 and my logo is still small. I am trying to find a way around this by coding it. I am new to coding Custom CSS and HTML and would like some help as to how I can center my logo on each and every page at a larger pixel amount . By using an image block possibly and just centering my logo.
I have inspected your page and found your problem.
In .Header-branding-logo the max-width: 320px; made every sizing effort of yours useless since the maximum width is only 320px, which is not big enough according to you.
So, I deleted that and modified the code as follow
.Header-branding-logo {
width: 200%;
position: relative;
left: -50%;
}
So now, the logo's width is twice as much as the container top-center's width. position:relative; left:-50%; is for centering your logo.
Like Michael have mentioned in his comments, you should have provided the code replicating the problem inside your question so people could have a nicer look to invest your problem.
I have been doing some HTML and CSS and have come across a problem that I hope someone can help with.
I am trying to make a full width picture cover a whole Div without a significant loss of quality to the picture.
An example of what I am trying to achieve is similar to the following websites:
https://sso.godaddy.com/v1/?app=mya&realm=idp&
http://www.ugle.org.uk/
Both websites use a picture which quality seams to not dissolve through being expanded or contracted.
How is this done?
Any one know of any tutorials or have example code that they could show me. I have created a picture that can vary to the browsers window size but its quality is awful when the browser changes size.
Thanks in advance everyone!
Very easy. There are a few ways to do this, but the most straightforward is to set the image as the background of the div, with the background size property set to cover: background-size: cover;
For example (CSS):
div {
background: url('path/to/your/image.jpg') no-repeat center;
background-size: cover;
}
Edit: Addressing image quality:
You'd need to make sure your background image is equal to or larger than the div's dimensions. If it's smaller - it'll be stretched to fit (this degrading the quality).
I´m trying to code a header image similar to the one on this page: http://www.eltrecetv.com.ar/nosotros-a-la-manana. Pay attention to what happens to the image of the guy when you resize the page. It stays in the same place, it´s always centered and it doesn´t crop (a little at the bottom but not that much anyway). Here´s my humble and succinct code: (and here´s a fiddle too: https://jsfiddle.net/wvep5ga1/ )
html:
<div class="outer">
</div>
css:
.outer{
background:url(http://eltrecetv.cdncmd.com/sites/default/files/styles/1440x386/public/nosotrosalamanana.jpg);
background-size:cover;
background-origin:padding-box;
background-position:top center;
min-height:386px;
}
The problem I find is when I resize the browser window the div compresses to the point where it´s only visible the face of the man, as oppposed to what happens in the original page where you can always see the shoulders. I don´t know if i´m explaining this correctly, but basically on window resizing the height of the div varies much faster than what it does on the original page and that affects the rest of the page, beacuse the image of the man must always stay in the same place and must always have the same aspect ratio. I have the aspect ratio issue solved, but i´m having problems with the height of the div compressing and expanding too much on windows resize.
The original page was done using Drupal 7, I think. But what i want is a css snippet that does just that. I know it´s possible, i´ve tried everyhting for hours but i missing something. I know the original page uses many images with different resolutions but that´st no the issue.
Hope somebody can help. I look forward for your comments.
Thanks in advance!
See updated fiddle: https://jsfiddle.net/wvep5ga1/3/
just add
background-size: 100%;
background-repeat: no-repeat;
Like this:
.abc{
background:url(http://eltrecetv.cdncmd.com/sites/default/files/styles/1440x386/public/nosotrosalamanana.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-origin: padding-box;
background-position:top center;
min-height:386px;
}
I'm setting up a website, and am at a loss when it comes to some of the more refined points of this CSS. It's kind of complicated to explain, and the code I'm altering could affect the site's entire layout.
So, I set up a dummy site that is an exact copy of what I'm looking at.
The problem child is the 'About' page.
Here's what it looks like on most full-sized PC screens:
And here is a "first draft" we are working off of. Created in another program as a map of how the final product should look.
Ideally, we need these to look the same. The entire wall (all the vinyl lettering and the weird art, down to where the floorboards start) needs to be visible above the dark content area on most devices.
What's troubling me is the way this picture is being presented by the CSS. The background-size:cover; attribute is giving me fits. Here's the style being applied.
background-image: url("images/testa333.jpg");
background-position: 50% -29.85px; \*(this is dynamic and changes as you scroll)\*
And
background-attachment: fixed;
background-size: cover;
box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
height: 100vh;
overflow: hidden;
position: relative;
I am finding it impossible to manipulate this to get it to look the way I want without affecting other areas of the page. I'm not sure if the answer is in the CSS, if I should re-size the image that's being applied as the background, or what.
Among other things, I have tried altering the size of the image and changing background-size: cover; to background-size:contain but this also affects the layout of other images down the page.
If you visit the actual website link I provided and edit a few things through the browser's console you'll have a better idea of what I'm talking about.
I'd appreciate any help a CSS guru can offer.
I apologize if there's an obvious answer to this elsewhere; I'm used to dealing with server-side stuff and basic back-end UI.
If anyone needs any more info, please ask.
Thanks.
You're running into issues with aspect ratios. Let me try and lay out what's happening, and some ways for you to resolve this issue.
What's Happening
You have an image that for argument's sake is 200x300. In your mock, you position everything exactly so that the spot that the image fits into is also 200x300. Everything looks perfect, you can see the entire image and nothing is cropped.
When you try and add the image to your website though, you're noticing the issue that you're running into. You still have your 200x300 image, but now you're trying to fit it into a area that is 200x250. A couple things could result from this.
You use background-size: cover; - The entire container is filled, but the top and bottom will be cropped depending on your background-position value. This is what is currently happening.
You use background-size: contain; - The entire container is not filled, but nothing is cropped. You will see the background of the container to the left and right of the image.
Solutions
In addition to the two things you could do above (which obviously isn't what you want), these might help solve the issue for you.
Maintain the aspect ratio for the container your image is in. This is the easiest. If your image is 200x300, your aspect ratio is 2:3. Make sure the container has that aspect ratio at all times so no cropping will occur. It can be 100x150, 400x600, or whatever, so long as the aspect ratio is the same as the image.
Use pictures that you expect to be cropped. This is what I will always suggest, but it requires some foresight to pick pictures that look good no matter what. In this example, I would have taken the picture further out or widened it so that you have a little wiggle room for background-position: cover to work with. This is also nice for mobile since screen sizes change and it's hard to keep the aspect ratio in check.
Use background-image:contain, but fade the edges into the background so that you can't tell the image doesn't fill the screen. This doesn't always work, and it looks like it won't work for your example, but it's good to keep in mind in case you run into this again. This gives you a ton more room to work with the image and can look really nice if the original image is edited properly.
Hopefully one of these solutions works for you. Honestly, it's probably easiest to just make your container taller. Keep increasing the height of your container until the edges are cropped instead of the top and bottom.