http://www.hamdenway.co.uk/portfoliojavascript.html
I am building a website portfolio for applying for apprenticeships. I made a generator with JavaScript which prints out results in a list through output.innerHTML.
It all works fine but when it prints off the page, the background image cuts off. I want the background image to continue repeating for the new content.
In Brackets in my stylesheet I am hovering over body {} and it doesn't update the height for the newly generated content. I thought it would do this as:
body {
background-image:url('../portfolioimages/yellowbg.jpg');
background-repeat: repeat;
background-size: auto;
height: 100%;
padding-top: 100px;
margin:0px;
}
So result is this horrible cut-off of the background image. If you need any more code please ask.
Remove height:100% from body css. Just open the console of browser and remove the height to test it
body {
background-image:url('../portfolioimages/yellowbg.jpg');
background-repeat: repeat;
background-size: auto;
padding-top: 100px;
margin:0px;
}
Related
This is a Next.js project and the mobile being used here is google pixel 3a. I'm having a problem where on longer pages my background image will not display at all. Here is how it looks on pages where the height is not exceeding the viewport height
But on some longer pages where you need to scroll to reach the bottom, it doesn't display at all
body {
background-image: url("https://via.placeholder.com/500");
background-size: cover;
margin: 0;
padding-left: 5vw;
padding-right: 5vw;
height: 100vh;
min-height: 100%;
width: 90vw;
font-family: system-ui;
overflow-x: hidden;
font-size: 1.3rem;
}
If I change background-size to auto then it will work on every page, but I would like cover. Maybe I don't understand how cover works for pages where scrolling is required, but I would like the background image displayed as it is in the first image, and if the content is longer than the view port, the content should just scroll across the image without the image moving. Any help is appreciated. Thanks.
If I've understood correctly, you want the background image to at least fill the viewport but if the body is higher than that you want it to fill the whole body.
Therefore, tell it that the min-height of the body must be 100vh and don't set an actual height, let it work it out from the content.
I'm assuming in this snippet that you want just one copy of the background, centered and using size cover (so it may get cropped top/bottom or at the sides depending on relative aspect ratios).
A dummy div is put in the snippet to ensure we get scrolling.
body {
background-image: url("https://via.placeholder.com/500");
background-size: cover;
background-repeat: no-repeat no-repeat;
background-position: center center;
margin: 0;
padding-left: 5vw;
padding-right: 5vw;
min-height: 100vh;
width: 90vw;
font-family: system-ui;
overflow-x: hidden;
font-size: 1.3rem;
}
div {
height: 350vh;
}
<div></div>
When I open the HTML file the background img is centered but after uploading the files to Wordpress the background is centered to the right of the screen. I'm at a lost for what the problem could be.
here's the code
body {
line-height: 1;
background:url(images/shopbg.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 80%;
background-position: center center;
background-color: black;
Your styling is applied to the <body> tag and when you are uploading your file you probably have other css files with classes on the <body>. You could create a specific class for your element and apply the styling there.
try create div and put the image and add a class to manage the image, or you need to see the image type background???
I can change only the background color like that (default color is white):
html, body {
height: 100%;
background-color: rgba(79,63,50, 0.85);
}
but cannot set an image, for example:
html, body {
height: 100%;
background: url(../img/main/background.jpg) no-repeat 50% 0;
background-size: cover;
}
Is it possible at all?
Plan B, could be to use an font-awesome's pre-loader symbol pre-loader, along with changed background color.
PS: The browser is Chrome. I'm using bootstrap with AngularJS. ng-cloak is used, also.
Could you please tell me why my background image not display completely .It only display upto the contend why ?I have only header in that so it display only small part of background image
Here is my code
.button-bar {
padding:3% 20% 3% 20%;
}
#wrapper{
background-image: url(/login);
}
Actually I got the answer but
when I am trying to give margin to my header tag my background image come down .but my header title remain on same position on top .
see this
.headerTitle{
margin-left:2%;
margin-top:2%;
}
Try with this:
.button-bar {
padding:3% 20% 3% 20%;
}
#wrapper{
background-image: url("http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif");
min-height: 500px;
}
Because the element with the background is only as high as the elements inside it. So in you wrapper there is only an h4-element with X amount of pixels high, so therefore the wrapper is also X amount of pixels high.
Try adding a min-height to your wrapper and see that the background follows. Like this:
#wrapper{
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
min-height: 250px;
}
https://jsfiddle.net/0tnjznt5/
Your css is doing exactly what you are telling it to do....
#wrapper is just that small slither showing with the background. If you want it to take up the entire page use .ionic-scroll in your css instead of #wrapper
See image:
http://screencast.com/t/l1ptRRNaDs
Try replacing #wrapper in your css with .button-bar, then try .ionic-scroll and see the results
.ionic-scroll {
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
}
If you want the full image to display inside #wrapper and you know the image height you can set #wrapper height and width like so:
#wrapper{
height: 1000px;
width: 1000px;
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
}
If you don't know the height and width of your image I would suggest using an <img> tag inside #wrapper instead... This will cause #wrapper to adjust to the size of the image
I've seen this trick on many websites and I want to make it for a project of my own.
I have an image background.jpg that is VERY BIG, just to be ready for any screen size.
I wish to center the background image to the visitor's window.
I mean, while scrolling the window content will move but the background will stay in place - centered vertically and horizontally.
BTW most of the viewers will have old crappy PC's so it'd better not flicker, if it'll be JS.
body
{
background-image: url('background.jpg');
background-repeat: no-repeat; /* you know... don't repeat... */
background-position: center center; /*center the background */
background-attachment: fixed; /*don't scroll with content */
}
put your image on the body background:
body{ background-image:url('your/image/url'); }
and put a div within the body:
<body><div class="div-body">{your site's contents}</div></body>
and create a css selector like this:
.div-body{
overflow:scroll;
width: 100%;
height: 100%;
display: block;
float: left;
}
try what is in this fiddle: http://jsfiddle.net/maniator/3RRYe/3/ demo
see if that works for ya ^_^