So, as a newbie I'm just getting lost in what I'm trying to do:
On the webshop I need to set up for my work, we are working with a 3rd party template for Lightspeed (e-commerce platform). In this theme, we've got 3 "highlight" items. These are background images + overlapping text and button to display products.
I've set the minimum height for these ID's to 800px:
#highlight-1,#highlight-2,#highlight-3 {
min-height: 800px;
}
So far so good, everything works.
But now, on a mobile platform (yeah, you can laugh already if you want because you know whats coming don't ya?), you've guessed it: the images are WAY too big.
I would love to crop the image to (maybe about) half the size for mobile platforms in portrait mode, so the essence of the image is still retained and users don't have to swipe about a kilometer before they reach the end of the page.
The only thing I can find within the .rain and .css files I have access to is:
#highlight-1{ background: url('highlight_1_image.jpg') no-repeat;}
#highlight-2{ background: url('highlight_2_image.jpg') no-repeat;}
#highlight-3{ background: url('highlight_3_image.jpg') no-repeat;}
I can edit this ánd I have access to a custom .css editor for the template
Anyone who can help a newbie out? Thanks a bunch in advance! :)
The ideal solution is to use a media query to serve a smaller image. This cuts down on bandwidth for mobile visitors who may be using limited data, and I believe has an impact on your page ranking within Google and the like.
#highlight-1{ background: url('highlight_1_image.jpg') no-repeat;}
#media screen and (max-width: 767px) {
#highlight-1{ background: url('highlight_1_mobile_image.jpg') no-repeat;}
}
If that's not an option, you can explicitly specify size with the background-size property, or set it to cover (scaled up or down so a single instance of the image will completley cover the element with cropping if required) or contain (scaled up or down so that the element is completley filled horizontally or vertically)
Related
I'm trying to make a website and I want an image (1920 × 1080) to cover the whole page. I used:
background-repeat: no-repeat;
background-size: 100%;
And it looks fine. But when I resize my browser and pull it down vertically, the image does not come with it. I want my picture to resize for example like this site: https://www.okainsbayseafood.co.nz/ (when you resize the browser vertically the image goes with it)
Sorry for my English and if I sound stupid
my webpage
Switch background-size from 100% to cover:
background-size: cover;
This tells the browser that the image should fill the available space, and will alter the dimensions of the image to do so.
Note: If you are adding this CSS to an element that is not the body tag, you may need to add additional code to resize the element to which you are adding this background. This CSS will create the desired effect if added directly to the body element.
Actually you have many possibilities to get such a result:
The page you linked above uses so called breakpoints, where it loads a resized image based on the screen size. This is indeed a good idea in that case, because they use very large images, which would load forever on small screens and low bandwidth.
For you, as a beginner, it is probably better to firstly get some deeper knowledge into CSS and what you can do with just a single image, and after that you can opt in to optimisations like the site above. So for you something like that would probably work:
background-image: url("yourimage.jpg");
background-color: #cccccc; /* Used if the image can not be loaded */
height: 100vh; /* You must set a height. (unless you have child elements that take the entire space) */
background-position: center;
background-repeat: no-repeat;
background-size: cover; /* Resize the background image to cover the entire container */
Study that CSS code and make sure you understand what it does and what other options you have. You might play around with some values there and get some other results.
What I want to achieve:
I am doing the very familiar CSS zen garden however I can't seem to get the image to float like this. I want it at the top of the page and to stay at the top like a toolbar like stackoverflow has mounted to the top of the page.
Unfortunately, any time I try to display my image it is not only behind the text but also far too large. I only see about 1/3rd of my image. If I try to scale it in any way then it disappears completely. I have seen that other people do this with the added <divs> but I am told that I should use ::before to do this ....either way I can't get either to even display my image ...the only thing that does barely work is ...
body{
background: url("../CSSMidterm/Header.png") center;
}
but as I said that displays 1/3rd of the image....any idea how I can rectify this situation?
To make it clear, I am asking how to mount an image to the top of a webpage using ONLY CSS no touching HTML at all. I want it to be fairly similar to the toolbar at the top of Stack Overflow own page.
You can try this
body {
background : transparent url("../CSSMidterm/Header.png") no-repeat center center/cover;
}
Link to the documentation for background css
I am trying to set images as links to an exact spot on a background image. I need the image links to stay in the same space on the background image and be responsive.
I am using html and css, and have little knowledge of any other programming language. I am trying to use a background image that is fixed and four images as links with absolute position values, but the image links move around when I change the browser window. Any suggestions? Thanks!
I can give you 2 ways to solve this as i used them before:
1: Use all measurements in %:
That is actually not responsive, but falls into the concept of fluid layout.. wich means it always fills the whole that it can on whatever size.
2: Use media queries:
that is considered responsive, because at each key sizing it will change your positionning:
#media (max-width: 1200px) {
.element {
/*INSERT POSITIONING STYLES HERE (POSITIONING[top, right, bottom, left])*/
}
}
.element {
/*INSERT DEFAULT STYLING HERE (COLORS, DISPLAY MODE, VISIBILITY, OPACITY)*/
}
REMEMBER: in order to position to work, you have to either set the element to position: fixed/absolute/relative.
Hope i helped out. In case of doubt, just ask me!
I have a navbar and footer than I grabbed and customized from Bootstrap's site. I now want to have a background imagine, but I'm unsure how to do this. I know if I wanted to have just an imagine, I could put it in a div between the navbar and footer and set play around with height:100%; width:auto; so that it resizes with the browser (although this doesn't work perfectly without some modifications) but I don't know how to do this if I have body { background-image: url('...'); } I have a large resolution picture in there right now, and on a 1080 screen it doesn't scale down, it just shows 1080px of the original imagine. Is there anything in Bootstrap or CSS tricks I can use? This might be trivial to some but I am new to this, just finished Codecademy courses which introduced me to Bootstrap and now I'm trying some stuff on my own.
So to recap I want to have 16:9 ratio of a large picture, if the browser becomes to narrow, I want the height to stay the same and start "cutting off" the left/right sides of the image so that the center of the image is still in the center of the browser. Likewise for vice versa. the height:100%; width:auto; doesn't quite work because if the ratio is wrong, it stretches the image.
I also want to have a different picture if the website is accessed from a screen-reader, but that's a project for another day. Let me know if I need to clarify anything, and thanks in advance
Use your CSS this way to make the background responsive.
body {
background-image: url("myimage.jpg");
background-size: cover;
}
Then when the page becomes "too narrow" use media queries to switch the background-size properties to actual width and height that work the way you have in mind.
I'm trying to get a background image to start and stay in a fixed position, but only until the rest of the 'content' of the page is finished, at which point the full image is displayed.
I'm working on a purely CSS solution. I should note that the image is larger than most (laptop) screens.
Specifically, here's the code that I've been using:
body {
background:$bgcolor;
background-image:url('http://i.imgur.com/cIGSehG.jpg');
background-repeat:no-repeat;
background-position:0px 72px;
background-attachment:fixed;
margin:0;
...
}
The image that I'm using is given in the url():
The effect that I'm looking for is basically the image will display only about the top 10% of the grass hill while you're looking at most of the page, but if you finally scroll all the way down past all the page content, the remaining 90% of the grass hill will be shown.
I couldn't find this anywhere, but I may have just been using poor search terms since I'm not so familiar with the lingo.
Well, this was one jiggy nut! I did come up with a not so stable trick to achieve this. I don't have time to develop it any more right now, but perhaps it might be a working concept.
Main contept
By providing a large and empty footer area that the user is likely to hover when reaching the bottom of the page, we use a sibling selector to change the position of its sibling element containing the background:
#footer:hover ~ #background {
background-position: center bottom;
}
Along with a few quirks (which ought to be improved) we can achieve a parallax effect.
Go Fiddle
Check out this JFiddle (in Chrome) to see and play with it.