I want to use a gradient throughout the page (top to bottom) but my current gradient completes halfway down the page where my text div ends and then starts again...
You can see it at codepen.io: https://codepen.io/pprunesquallor/pen/zwapGQ?editors=1100
My codepen uses Bootstrap 4, if that's of any relevance.
I hope I don't need to paste the entire HTML/CSS as there's already quite a lot of it. Here's just the gradient part:
body {
background: #00001e;
background: -webkit-linear-gradient(to top, #F5981F , #5D82B3);
background: linear-gradient(to top, #F5981F , #5D82B3);
Your body does currently not spread to the full page height but rather depends its size on its content height. To achieve a fully stretched background you might consider adding height:100% to you html element.
Furthermore, a background-attachment: fixed in your body CSS helps to fix errors on small browser windows.
Related
So I'm trying to get my webpage to have a two tone look, one side plain and the other with a radial gradient.
I currently tried making it into an SVG and that failed horrible but I am not entirely sure how to get a triangle that goes from the top left, bottom left, and top right of the page, while also scaling to the browser size.
When I use the SVG as a background, there is a large white block around the top and bottom, and when I just simply don't use a background and just put in the svg code into the HTML it's so giant and I can't manage to get it to scale.
This photo was something I made in sketch but I am new to frontend and I've just had a rough time getting the angles color.
I can get everything else if I could just get the background to do that :c
No need SVG you can do this with CSS and multiple background:
body {
margin:0;
height:100vh;
background:
linear-gradient(to bottom right,transparent 49.8%,grey 50%),
radial-gradient(circle at top,yellow,black);
}
Is it possible to set a linear gradient to the part of the background of <html> element that is typically off screen and out of viewport, but can be "brought in to view" momentarily by trying to scroll past the limit in any of the 4 directions?
I am trying to make the color outside the viewport match my site color. This way, when the user is at top of page and tries to scroll higher, on some browsers, the space that is shown and is typically white will match the color of my site.
I want to do the same thing for the bottom of site if user tries to scroll past bottom.
If I set element's background-color to red, this works perfectly, and all the white color outside viewport, top f page, bottom of page, as well as left and right, will now be painted red instead of default white.
Problem is, my header and footer are different colors, so I need to use a linear-gradient. When I use a gradient, for example:
background: -webkit-gradient(linear, left top, left bottom, from(#f8593a), to(#000));
background: linear-gradient(#f8593a, #000) no-repeat;
it simply doesn't show up.
Am I doing something wrong, or is this simply not possible?
UPDATE
Test Case jsFiddle
Best I can do in a jsFiddle. (PS: if someone knows of a way to create a fiddle like this without jsFiddle's panels, so the actual Chrome pulling down can be tested, please suggest.)
The difference between this example and live behavior is that in the example, you can't drag the iFrame window past its boundary, thereby revealing that `out of viewport part of .' However, the blue background-color here should represent that same area here. And as can be seen, the color goes to that area without any extra work, while the linear-gradient is treated as an image and stays within some bounds.
Problem occur on Sambungs tables. I have background image set on body.
Css look like
html, body{
background: url('img/background.jpg') no-repeat;
background-position: top; // i tried also cover, fixed etc
}
Webpage is quite high, like over 2000px , where background image takes first 600px, and it could be fine for me, but when i click to hide some box on the bottom of the page, background will automatically appear at the visible part of a screen and it will be eareased from the top of the page. Page isn't realoading during hiding boxes on page, that's why I don't really know how to solve this problem.
Any suggestions ?
Problem solved. I had to input background into div#wrapper. It solved my problem with rendering of background image
I am trying to add this 3D image as background to the content of a wordpress website
This is the theme demo I'm using
I would like the header part to stay the same size on all pages, the same goes for the footer. But as the body changes from page to page, I would like it to change accordingly but still fit properly to the header and footer part of the whole image.
The problem with this background is the fact that it not symmetrical, so the top & the bottom of the body image suppose to include the top & the bottom of the canvas (the middle part of the image)
I tried different techniques to implement this solution, but couldn't figure it out. The issue is that the body part of the image doesn't repeat-y so well, as it changes throughout the height of the image,
I would appreciate a solution, and it doesn't matter for me if I have to cut the images to a several parts.
Thanks
If you are lucky, you can do something with border-image.
This CSS, for instance,
body {
width:100%; height:100%;
-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
margin:0;
border-width:63px 40px 133px 40px;
border-style:solid;
border-color:brown;
border-image-source:url(http://webbos.co/vibration/wp-content/themes/vibration-child-theme/images/back1.jpg);
border-image-slice:189 120 399 120 fill;
}
sets the borders to a fixed width (in this case 1/3 of the width of the sides in the image) and distributes the rest of the image over the body background.
Then all you need to do is position the header and footer on top of the border of the body...
Fiddle.
Disclaimer: I've tested in Firefox and Chrome. MDN says it won't work on any other browser.
I have a a background image on my html with css page, from blue at the top, to white at the bottom.
However, the image 400x800 and the page is much longer, so it repeats.
The page length varies all the time.
Is it possible to solve this so the background stretches to the page length somehow? or maye make it not repeat and make the background white with the image on top?
If yes, how please?
The easiest is to set the image to not repeat and then set the background color the same as one end of the gradient:
body {
background: white url('yourImage') repeat-x top left;
}
Getting a gradient to stretch to fit the window is doable, but is more work and would require some javascript.
I know that there are jQuery / Javascript methods of accomplishing this:
Resizable Backgrounds with jQuery
Stretch background image - jQuery - Demo
but besides resorting to solutions like those - you could:
Select a pattern for your background that repeats (textures etc.)
Create a very long background image that could handle most navigation that your page
would deal with.
Another alternative is to make your gradient the same at both ends with the maximum colour difference at the 50% mark.