In trying to finalize the layout for my blog, I am having one issue I cant seem to get past. I have two different backgrounds that I want to use for my blog. One of the backgrounds is used just for the header of the blog. The other background I want to add is for the rest. I have been trying to find a way to get my body background to repeat after so much spacing with little luck.
If there is a way to have a background repeat-y after a certain position that would be perfect. But that doesn't seem possible from my searches. If there is another way to accomplish this, it would be very helpful.
This is the site I am trying to edit.
As you can see, the header has the proper background, but I cant figure a way to get that background everywhere else. For clarification, the background header has a blue background under the home/search buttons, so that is why I cant just have one repeating header.
I just made a few edits to my site, and I got to to look very close to how I want. I did more of a quick fix that is "good enough". I just made the header background repeat, and it looks pretty good for the most part. The only problem with it now is that the blue bar that is part of the header sometimes shows up at the bottom of the screen, which is okay I guess. If anyone has a better solution I would love to hear it.
When you specify "repeat-y" then there is no posibility as far as I know to make the background begin repeating after some coordinate.
However, since you have 2 different backgrounds, you don't need to.
Just specify the non repeating background first, and with the adequate dimensions; it will hide the other
This CSS
.test1 {
background-image: linear-gradient(90deg, black, red), linear-gradient(0deg, white, yellow);
background-position: 0px 0px, 0px 0px;
background-size: 100% 100px, 100% 50px;
background-repeat: no-repeat, repeat-y;
}
produces a black & red top, followed by a repeating pattern of yellow stripes
demo
It is not clear from your example if this is enough; if not you would need another background, between the first and the second, to hide the amount of the repeating background needed
Related
I have a school project where i need to make a exact copy of a website.
The background is a bit tricky because i need to (what i think) add a radial ellipse but then with no sides or bottom, only the top.
when i try to make a ellipse i get a oval which covers all four sides (obviously) but i dont know hot to apply it to the top only.
can anyone help me out?
this is what is is supposed to look like
PLease pay attention to the background only
I already tried a ellipse and a normal radial gradient but i does not function how i want it to be.
this is the code i have
background-image: radial-gradient(ellipse, white, lightgrey, lightgrey,
#1b1b2e
#1b1b2e);
adjust your code like below:
html {
min-height:100%;
background-image: radial-gradient(150% 150% at bottom center, white, lightgrey, #1b1b2e, #1b1b2e);
}
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);
}
What the difference between background: no-repeat center center;
and background-size: cover; ?
Both achieve basically the same effect as a background image on my website. No difference as far as I can tell in results.
background: no-repeat centre centre;
is saying place a background image in the element, but only show one instance of it (no-repeat), try looking at thebackground-repeat property to see other options.
The CSS then says place the image in the vertical centre, and horizontal centre of the element. This is related to the background-position property.
It might be worth you trying to reducing the image size to something small 10px x 10px to see the effect of no-repeat, vs repeat-x, repeat-y and repeat.
background-size: declares how big you want the background image to be (this allows dynamic resizing of the image much like height and width in the html img tag), this is a property introduced in CSS3.
By default this is the background-image's default/native resolution. By using the be cover value you are saying scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
I have put links on each of the properties so you can see the possible values for each. I recommend you look at all of the background-* attributes on w3schools. Look on the left hand side and they are all listed ;)
Alternatively if you're new to CSS, I would recommend this free course by Udacity which has plenty of video tutorials and guides you through HTML & CSS web development.
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.
Here is what I want to make, somehow:
1- A gradient background from top and down. There should be 2 colors, lets call them color1 and color2.
2- I want the gradient to be about one page, so it starts on top with color1, and then ends about one page down with color2.
3- Then I want color2 to continue all the way down for whatever size the page is.
Is this possible with css maybe?
Thanks
You can create an image that is a couple pixels wide and whatever vertical length you want for your "page size".
In CSS, there's a way to control the repeating of an image. So, you could do a repeat-x, to get the image to repeat left to right. Then, just set the background color of your site to whatever the second color is, so that if your content extends further, the user will only see Color2.
e.g. CSS
body {
background-color: #b5b5b5; /*gray*/
background-image: url(./images/body_bg_gray_1380px.gif); /*path to wherever your bg img is...*/
background-repeat: repeat-x;
}
Use short-hand notation:
body {background:url(images/body_bg_gray_1380px.gif) repeat-x #b5b5b5}