I have looked all over the internet and I still can't find the solution to this question. How would I make a background image in my website that scales to fit the whole display but it scrolls away with the page when you scroll down to view the rest of the webpage content in CSS. I also want text that will be over the image. ex. my name and a picture of me.
The background-attachment CSS property is what you want. set background-attachment to local. That makes it scroll along with its contents!
Related
So, i'm trying to design my first page, and kinda trying to learn as i go.
I'm trying to design a one page website, that contains multiple backgrounds, so i divided each section of the website that will contain a different background into divs.
The background looks fine with a full sized window and 100% zoom on the page, but if i zoom in it gives me the option to scroll the page horizontally and it gets messed up, id like to make it so it just simply scales and it does not give me the scroll option.
I've tried setting the background size to cover the page, messed with the width of both the body and the div that contains the background but i can't seem to get it to work.
So, this is part of the page with 100% zoom:
Fully scaled window 100% zoom
But when i reduce the window: it looks like this:
Gives me scroll option and the background image cuts out
Heres the HTML code:
HTML code
And heres the CSS:
CSS code
Thanks, sorry for noob question.
Alright i think i found a solution while just trying different stuff out:
i put on the html and body css:
overflow: auto;
It seems to have fixed my problem, i was kinda of just randomly trying stuff out.
Thx for the help.
If you look at what happens here when you reduce the screen width is that the big photo becomes shorter and shorter, still filling in the full 100% of the width:
https://mmistakes.github.io/minimal-mistakes/
Now, I don't find that appealing and would like to make that photo disappear and become a background of the whole top (navbar) part once the navigation bar becomes the button. However, I would like only a certain part of the photo to show up, not the whole width.
Any hints on how to achieve that?
Update: the tricky part here is that each page has its own image. Since this is jekyll, in theory, I could add a css entry in the <head> of each generated page for setting the background image of the navbar, but I'm not sure whether there is a more elegant solution.
Put the picture as a background for your nav-bar and use the css background-position attributes.
Use viewport and let the image (the img-tag) disappear
I have created a html page which simply has a div and an image inside of it.
My problem is when I resize the browser screen, the image is also resized. I would like to make something to whenever the browser screen changes its width, for example, the image keeps the same resolution by showing scroll-x to see the entire image.
I could do it by doing some workaround. Please see the fiddle below:
http://jsfiddle.net/EB2cq/
<div style="width: 1424px; ">
<img src="http://1.bp.blogspot.com/_duWYbLDtB5s/RxD10qnsOZI/AAAAAAAAACc/9nPZhQRAVZ4/S658/google_logo_halloween_d-(mip.jpg"/>
</div>
As you can see I can scroll through the image when the browser screen changes its width. But in my case I don't want to see the width of a div cause I only want to show the scroll bar when it is really necessary.
If you remove width style attribute from div in the fiddle above, the behavior is what I'm expecting. The div gets the scroll x only when the width of the page is less than the width of the image. However, in my web application, the same thing does not happen. The image is also resized according to browser width.
What can I be missing here? I have exactly the same fiddle code in my web application
I took a look at this question but it has not helped so much:
Get image to stay fixed even with window resize
Have you checked the style of the parent element(s). That might be the issue.
I have a problem I haven't found an answer to in similar questions:
I have a site that dynamically resizes a horizontal scrolling image gallery and some text as you resize the browser. That part I have working OK, I just can't seem to get proper control of each respective element.
Take a look: http://john-godwin.co.uk/testsite
If you resize the browser, the large text overlaps the gallery before the gallery starts shrinking, and if you resize the browser small enough, the gallery eventually overlaps the footer as well.
Does anyone know what changes I need to make to the code to make everything stay within a boundary and resize respective of the other elements without encroaching into each elements space?
Thanks in advance.
The CSS can be found in http://john-godwin.co.uk/testsite/css/style.css
Remove z-index:500; in the .content class
I'm essentially trying to design my header and footer how it's done at StoreEnvy. They have a large (2400px wide) header and footer, which are always centered. When you resize the page horizontally, th same part stays centered, but new parts of the image are exposed along the end of the browser window.
I've tried setting up my document like this, but I can only either 1) Get the image the resize to fit the entire window, or 2) have scroll bars totaling the width of the images.
ANy idea what I may be missing??
Thanks!
Make the image a CSS background and center it. Then it will crop as expected. There are other methods but this is the easiest.