The question looks like, i am asking for a code, but that's not so. I googled plenty of times and landed in pages which did not told what i wanted. It may be my bad part to not find it in google.
I've seen it somewhere, probably on some site, that i don't recall
I have six png files, namely,
top_right.png,
top_left.png,
bottom_right.png,
bottom_left.png,
horizontal.png,
verical.png
What i want is to make is a box, with borders using the images above.
I think it has to do something with background position and percent, but i couldn't find how to do it?
Separate them using commas ex:
body {
background-image: url(bottom.png), url(top-right.png);
background-position: center bottom, right top;
background-repeat: no-repeat;
}
Related
I'm trying to make a website and I want an image (1920 × 1080) to cover the whole page. I used:
background-repeat: no-repeat;
background-size: 100%;
And it looks fine. But when I resize my browser and pull it down vertically, the image does not come with it. I want my picture to resize for example like this site: https://www.okainsbayseafood.co.nz/ (when you resize the browser vertically the image goes with it)
Sorry for my English and if I sound stupid
my webpage
Switch background-size from 100% to cover:
background-size: cover;
This tells the browser that the image should fill the available space, and will alter the dimensions of the image to do so.
Note: If you are adding this CSS to an element that is not the body tag, you may need to add additional code to resize the element to which you are adding this background. This CSS will create the desired effect if added directly to the body element.
Actually you have many possibilities to get such a result:
The page you linked above uses so called breakpoints, where it loads a resized image based on the screen size. This is indeed a good idea in that case, because they use very large images, which would load forever on small screens and low bandwidth.
For you, as a beginner, it is probably better to firstly get some deeper knowledge into CSS and what you can do with just a single image, and after that you can opt in to optimisations like the site above. So for you something like that would probably work:
background-image: url("yourimage.jpg");
background-color: #cccccc; /* Used if the image can not be loaded */
height: 100vh; /* You must set a height. (unless you have child elements that take the entire space) */
background-position: center;
background-repeat: no-repeat;
background-size: cover; /* Resize the background image to cover the entire container */
Study that CSS code and make sure you understand what it does and what other options you have. You might play around with some values there and get some other results.
I'm trying to have a background image use up all the space of it's container.
Things looked pretty straightforward, using background-size:cover but it doesn't work properly.
the page I'm working on can be found here
the background image is declared inline in the div with class x-bg-layer-lower-image:
<div class="x-bg-layer-lower-image" style=" background-image: url(http://jeango.net/thesphere/wp-content/uploads/2018/03/background-header.png); background-repeat: no-repeat; background-position: center; background-size: cover;"></div>
when I inspect in chrome, i clearly see that the div has it's height and width correctly occupying the entire screen. Yet the background image doesn't use up the entire space (see screenshot)
I can't see what I'm doing wrong here. Perhaps someone can help
Lol, Don't mind but you are such a headache man, I wasted around 30 mins finding a solution for you... Look at your background image once, it already has white spaces in top and bottom. You CSS is correct. Try opening the background image in browser and see.
Ha ha ha.
I would like to have two background images for a fansite layout I made: one background should be repeated both horizontally and vertically, the other one only vertically and needs to have a specific position. I made some search on StackOverflow and I added the following to my CSS:
body {background: url(images/bg.png) 162px repeat-y, url(images/bg-all.png) top repeat;}
Clearly I'm doing something wrong though, because the only image showing up it's the second one, the bg-all.png file. I'd need the bg.png to be over bg-all.png because it's the content background.
In order to make things clear, even though it's far from being finished (in fact, there are several other issues but I think it's better to solve one problem at a time), I'm adding a link to the test version of the layout: http://gwyneth-paltrow.org/test/
I don't know if it matters, but it's a Wordpress site.
I'm definitively not an expert and every suggestion is very much appreciated.
Thank you all in advance!
the second value of the background position is missing, try this and substitute the ??? with a value:
body {
background-image: url(images/bg.png), url(images/bg-all.png);
background-position: 162px ???, top ???;
background-repeat:repeat-y, repeat;
}
also note that the first declared background image is ON TOP of the second one.
http://jsfiddle.net/gB7js/
I have a website with a repeated background image.
background: url(images/back_small.png) repeat center center fixed;
I would like it more, however, if the image were not repeated one copy after an other, to add some variation.
The final result should be a sort of a dotted pattern where the image appears now and then, instead of being instantly repeated.
I have no idea if this is possible with CSS, but if so... I'm waiting for idea :D
I recommend using a variation of the multiple background technique where you save your image with differing sizes of transparent "space" around it based off prime numbers.
It is known as the Cicada Principle on this site.
The prime numbers introduce the "randomness." Of course, if you do not want them to overlap in any way, then you will need to be very selective exactly what image sizes to use to insure no direct overlap occurs within a normal size monitor display.
My solution is to use the same image twice (we can put as many background images we want).
Then use different repeat-x and background positions to dictate the final look of the background. My solution is as follows:
background-color: white;
background-image: url(../../../../../assets/images/my-watermark.png),
url(../../../../../assets/images/my-watermark.png);
background-repeat: repeat-x, repeat-x;
background-position-y: -60px, 400px;
background-position-x: -150px, -270px;
There's not really a way to do exactly what you're asking in pure CSS. I have however seen people introduce "noise" into a site's background using multiple images.
Here's an example of using multiple backgrounds with CSS.
Here's a stackoverflow question regarding noise in gradients.
Hopefully this gives you some ideas to get a feel for what you want on your site.
OK, I would like make my "compass" move so it will not block the text when the screen gets smallar.
http://www.mateuszrybinski.com/
The point is not to make the compass go over the text.
["I’d love to travel but...
I don’t have money.
I don't have time.
I can't speak the language.
What is your excuse?"]
#main_box {
margin: auto;
background-color: #c95242;
overflow: auto;
padding-top: 50px;
padding-bottom: 70px;
background-image: url(http://www.mateuszrybinski.com/wp-content/uploads/2013/04/half.png);
background-repeat: no-repeat;
how can I do it? The best solution would be if the compass was going down as the text was closing in.
If you want to customize the position of the compass image, I would recommend not applying it as a background image. Instead, make it show up inline so that your text will never overlap it, similar to what you've done with your portrait image.
That being said, I'm not totally sure where you want your image to show up and that heavily influences how the layout would be coded.
I don't know about the layout code, but have you considered instead changing the color of the compass so that the text is still legible when over the compass image? For example, the compass could be a slightly different shade of the red background color.