Hope all you are doing good.
I have an area on the webpage where I want to add the background picture.
I have two Images.
One I have a background picture of icon which small tittle block image size almost about 5kb
And I have a Background image which fits the whole background-size is almost about 100kb. which fit to the screen.
image
I want to improve the page speed so if I add a little icon image which repeats my self and look good in the background.
Can you please tell when the image repeat in the background does its size also increase like if the size is now 5kb when image repeat one more time its size now 10kb?
Can you please suggest me which one I have to use one big image or small icons repeat.
Hope you got my point.
Use small icon, preferably a GIF image. Once that is done, you don't have to necessarily specify the size.
The code below repeat a background image both vertically and horizontally
body { background-image: url("my_image.gif");
background-repeat: repeat;
}
If you want to repeat it horizontally, use the code below
body {
background-image: url("my_image.gif");
background-repeat: repeat-x;
}
For a full description on how this works go to this link but for the solution you need the code is below as well
https://www.w3schools.com/cssref/pr_background-repeat.asp
if you want to repeat it horizontally you can use:
background-repeat:repeat-x;
if vertically use:
background-repeat:repeat-y;
if you want it to not repeat use:
background-repeat:no-repeat;
hope this solution helps
Related
In Chrome
In Chrome, it works just like the picture above.
In Safari
However, in Safari, it does not work as shown above.
The CSS code is as follows:
background-image: url(rendyhome.png);
background-size: auto 66vh;
background-repeat: no-repeat;
background-position: right;
How do I fix it?
background-size: contain;
You can try with the following code that tell the browser keeping image inside the container, then, to center it. This solution may create a blank color around the image that can be filled using background color;
background-size: contain;
background-position: center;
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
A keyword that scales the image as large as possible and maintains
image aspect ratio (image doesn't get squished). Image is letterboxed
within the container. When the image and container have different
dimensions, the empty areas (either top/bottom of left/right) are
filled with the background-color.
background-size: cover;
You can also use background-size: cover; that will entirely fill the screen with your image.
Be careful: using this technique, you need to know the image may be cut by the browser if the screen ratio is not the same as your image (think responsive). As I can see on your image, there are some wording inside, so the cover solution may be inappropriate to keep them visible.
When the image and container have different dimensions, the image is
clipped either left/right or top/bottom.
Both solutions are good, but effects are different. It depends on your behaviour preference. Even if image ratio is respected in both solution, one solution clip/cut and the other create a blank around the image.
This is an image from marcarea.com, in order to summarize. You can see behaviours I described before.
Look here:
https://www.w3schools.com/cssref/css3_pr_background-size.asp
I would look at using
background-size: cover;
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 been doing some HTML and CSS and have come across a problem that I hope someone can help with.
I am trying to make a full width picture cover a whole Div without a significant loss of quality to the picture.
An example of what I am trying to achieve is similar to the following websites:
https://sso.godaddy.com/v1/?app=mya&realm=idp&
http://www.ugle.org.uk/
Both websites use a picture which quality seams to not dissolve through being expanded or contracted.
How is this done?
Any one know of any tutorials or have example code that they could show me. I have created a picture that can vary to the browsers window size but its quality is awful when the browser changes size.
Thanks in advance everyone!
Very easy. There are a few ways to do this, but the most straightforward is to set the image as the background of the div, with the background size property set to cover: background-size: cover;
For example (CSS):
div {
background: url('path/to/your/image.jpg') no-repeat center;
background-size: cover;
}
Edit: Addressing image quality:
You'd need to make sure your background image is equal to or larger than the div's dimensions. If it's smaller - it'll be stretched to fit (this degrading the quality).
I'm sure I poorly structered that question title, but this is what I'm trying to do:
Key: image = moving picture behind submit form
Problem 1: Get the background image to stay at that perfect size no matter the width of the page.
Get the entire frame of the moving image showing.
When the image is at the perfect width (http://gyazo.com/702e443a6b814b1abc26a801836f4d6f) it shows the entire image.
When the width is increased even more, the image starts to 'zoom in'. (Which I don't want.)
Problem 2: On mobile devices with much smaller screens, most of the image is cut off (and you can't scroll to see the rest).
Get the entire frame of the moving image showing.
Have the entire image centered and the user should be able to see the entire frame of the image.
This is what my code looks like for the image:
background-image: url("https://s-media-cache-ak0.pinimg.com/originals/a4/79/4c/a4794cbfe048505d9645339738a8ddc7.jpg");
height: 60%;
background-size: 100%;
background-repeat: no-repeat;
background-size: cover;
jsfiddle
You need to do the following:
#top{
background-image: url("https://s-media-cache-ak0.pinimg.com/originals/a4/79/4c/a4794cbfe048505d9645339738a8ddc7.jpg");
height: 60%;
background-position: center -150px;
background-repeat: no-repeat;
}
Because you were using the background-size: 100%; you're telling the browser to scale the image for you. By removing it and positioning the background you'll achieve what you want with the image never resizing.
Fiddle
Note: You'll need to make sure that your image is large enough that when the page is stretched really large that you won't see the background. It will be hard to do, given that screen resolutions are getting so large now.
#your_image_container_id {
width: 100%;
}
What you are trying to say is called "Responsive Web Design". In order to achieve RWD, you never use absolute units such as pixels, points... but rather use relative units such as %, em which scales according to size of the screen. but you have do some calculation though such as %, make sure all elements on same row do not have the total of with percentage of over 100%, or something like that and also have to compensate for paddings and margins.
Currently, I have a mockup website www.hush.technology
and on my windows (17 inch) computer the website background is full screen
but on my mac (13 inch ) the width of the picture is cut off on the right. I generally like to solve problems on my own but I can't figure it out.
my css looks like this
// CSS CODE
.bgimage {
background: url(image url);
background-size: cover;
width: auto;
height: 720px;
}
Would anyone know why this is happening. I would love an explanation.
From here
background-size:cover
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 assume the aspect ratio is off, and it is clipping part of the image.
I'll try to build on what both of these answers have said. But I'll tell you in short: there is no solution to what you're trying to achieve because it isn't possible. Here's why:
The first box from the left shows what you have as a full screen browser - your image background perfectly covers the screen as you want it to. Your screen is the same size as the background and the image ratio is kept.
The box in the middle shows what happens when you resize your browser (or view on your 13" mac, which I'm assuming is a lower resolution). The image gets cut off the left and right! But why? Because the image is doing what it's been told to: keep it's ratio and cover the entire screen. They both have to be met, and the background image doesn't care whether all of itself isn't visible - it just cares that the screen is being covered and the ratio is the same.
The final box (one on the right), is the implementation of user3739658's answer. You've told the image you want it to make itself entirely visible, and keep the ratio. The consequence: it can't cover the whole screen anymore.
Your background image can only be guaranteed to do two of the three at any given time.
Cover the screen
Keep the ratio
Show the entire image
Another panel I could show is the image being told to: cover the screen and show the entire image, which would result in the image being stretched one way or the other.
The Solution
The easiest thing to do is to remove your static height: 720px;, which means the div can now resize based on the width of the browser (to keep the ratio of the background image).
An alternative is to change your background's purpose - your image is mostly made up of three things:
The actual picture on the right
Some largish text on the top left
Lots of background colour
You can split the background up into just having a picture on the right, and text on the left, with your background now being just a colour. The advantage of this is that the image will always show at the right of the screen, and your text will always show (and is now no longer a picture). Both the text and picture will also never skew, since the property being resized is the background color's width: which doesn't matter since its just a colour fill.
Check this link;
Perfect Full Page Background Image
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
good luck!
first of all keep in mind I uderstand a very little of HTML language...
if you answer, do it as if you'd do it to a 10yo boy...
The question:
I'd like to have a background image in my website and another one on it.
the bg's image can be freely resized to match the screen or mobile size,
but the second one should keep its aspect ratio....!
http://www.flickr.com/photos/110747328#N03/
![you'll see on the left the full screen size and on the right the mobile size][1]
I dont know if understand you correctly. Here's what I get:
You want your bg image to be dynamically resized according to the size of the screen, but not the "content".
You can get the first by using the "background-size: cover"'s CSS property for your background:
body {
background: url('path-to-your-image.jpg') no-repeat center center fixed;
background-size: cover;
}
After that, if you just create a div and put your content in it. You'll get what you want: for the background to be resized and the content to keep its proportions.
Here is a live example: http://jsfiddle.net/agarridob/8NtwE/
By the way, I strongly recommend that you take a look at http://www.bentobox.io, where you'll find lots of resources that will help you understand a bit of what this HTML & CSS is.