Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Alright so i have been having a hard time when applying background image to my html code. The problem is that if i make my browser too big it will zoom in too much and if the window is too small it will cut off half of the website. I want to figure out a way to make it so that whenever i resize the browser window the background would also resize depending on the browser window size.
Thanks in advance!
CSS has a background-size property that you can set.
background-size: contain; would probably do the trick.
Below are some more resources regarding hte CSS property background-size.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
http://www.w3schools.com/cssref/css3_pr_background-size.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
contain is most likely what you are looking for.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 days ago.
Improve this question
I am having a hard time getting a background image to be complete and when i scroll it just stops. Any idea what might be the issues? If you look the margin is off on the sides and bottom.
Your webpage will be displayed on different sizes of output devices. How do you want the background-image be displayed in different scenarios?
There are two strategies:
a) you could repeat the background-image to fill the available space. Have a look at https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat for different values.
b) you could resize the background-image to fill the available space. Have a look at https://developer.mozilla.org/en-US/docs/Web/CSS/background-size, especially cover and contain.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 days ago.
Improve this question
The website is: https://www.epicoyachts.ch
As you can see there is the possibility to scroll right, which should not be possible.
I've tried to play around with the positioning settings, trying to scale the upper bar to the screen. But it has not solved the problem. I can't understand which settings I have to adjust, and mainly of which element.
it's the tiny red arrow to scroll back up
I haven't found any code for your website but, I have a feeling that for your page dimensions you are retrieving the data from the user resolution or, using a constant resolution like 100%.
If that's the case then I'd suggest possibly a fixed lengt resolution of eg 1920p.
//You can try this first if you did not have this
html, body {
max lengt: 100%;
overflow-x: hidden;
}
// If you did have it you can try changing 100% into a standart resolution (1920)
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
The problems that I have is that
1st. the image will change when I resize the window but the text won't
2nd. when I put the browser window to the side there is a white box
Please help me with this 2. I'm getting annoyed
I was going as the "Free HTML and CSS3 Course" to make you own website by Bring Your Own Laptop.
you did not share your source code. Regarding your problem what you can do:
set padding and margin 0 to the body of your HTML.
set font size in em, or vw of your text.
write your own css media queries to make a responsive website.
We couldn't got any image or code. So it's hard to tell but for 1st problem I think you are setting font-size in px(pixel). Means it will take a fixed amount of screen size. You could try with something else as abir sikder said em or vw or %.
Also I think
box-sizing: border-box; will help
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
To be honest I am very new to HTML/css so forgive me if I could not be specific. See the right side of the page. The elements are fine but the background bar changes size according to the page. If I maximize the page then everything is fine.
Here is the jsbin link: https://jsbin.com/qaxaxo/edit?html,output
thanks in advance for helping, I am really stuck here.
In your case, you must define a min-width attribute for #container in CSS look below :
#container {
min-width:1270px; /* Or whatever is minimum size of header */
width:100%;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Full code can be seen here
Since I am a new stackoverflow user and I can't post images, I will be posting my problem w/ images to make it more clear in a google doc.
Google Doc
Thanks for your help!
Take a look at this
It is using background images and using background-size: cover; it preserves the aspect ratio.