I want to make login form using hmtl , css and one function with javascript, but when i add image url to my body class in css i get displayed few images instead of one that fits the whole screen size.
Any solution?
[enter image description here][1]
how are you adding the image, with background-image?
You could try to add also background-size: cover, which will scale the image (while preserving its ratio) to the smallest possible size to fill the whole container.
example
body {
background-image: ...
background-size: cover;
}
You can read more about it here
Related
when I try to import an image using css, it always distorts the image. the image on my desktop is 180px X 80px, I bring it in with css like this:
.image{
background: url(trya5.png) no-repeat 50% 70%;
}
when it appears in my browser it is like twice the size of the dimensions of the original image file. If I reduce the dimensions of the image file in half and save it in my project folder, then it fits the size I need in the browser but it looks fuzzy and loses quality. help?
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.
Users are able to upload an image that get displayed in a square container in the UI. The problem is that they can upload images of any size so they may be to small, portrait, landscape or some odd aspect ratio. Images should always fill the container and be centralli positioned.
I would like to style these images so that smaller dimension is always of specified size while keeping aspect ratio as is.
Suppose I want my images to have resulting dimension 50px (smaller one should):
Portrait image: 100px(w) x 200px(h) => result: 50x100
Landscape image: 200px(w) x 100px(h) => result: 100x50
Square image: 100px(w) x 100px(h) => result: 50x50
I want my images to be at least 50px in either dimension. Using max-width and max-height resizes images to at most 50px...
Requirements for original solution
CSS only
Images should be IMG tags, and not placed as backgrounds
No Javascript
I've tried using max-dimension styles but using this I can always control just one dimension. I want to control both simultaneously.
Requirements for plan B solution
It's possible that original solution restricts too much with its requirements. In this case I would be using CSS backgrounds as described in this question. The problem is that my images aren't defined during design time, but rather during runtime as users are selecting images and I'm using FileAPI to display them before uploading to server. This would require me to define inline styles and I'd like to avoid that.
Resulting solution
Unfortunately it isn't possible to resize images directly using only CSS. And with images I mean the IMG elements. This functionality is otherwise supported for element background images. And IMG elements are no different in this regard so we can actually set backgrounds on them too. My image therefore displays a transparent image and has a background set to what image should display.
This is the solution I ended up using:
img {
height: 50px;
width: 50px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
I'm programmatically setting background image using inline CSS as images are read using FileAPI from local file system and I'm using data URI to set them as backgrounds.
Works...
try this css for image tag:
img{
max-width: 100px;
max-height: 100px;
}
in this case you have Portrait and Landscape images as you want(with keeping their aspect ratio).but only Square are stayed 100*100.
here is a fiddle .
I am trying to use a image to set the background but when I put in my code I end up with multiply images instead of one whole image, I can't post a picture but here is the code i used in the CSS:
body { background-image:url(../images/kw4.jpeg);}
Am not sure what I am doing wrong?
If you mean multiple copies of the same image all over the page, then that is not actually a bug. When you specify a background image in CSS, your browser will automatically fill the page by tiling the same image over and over.
To prevent this from happening, add
background-repeat: no-repeat; to your CSS. This will render the image only once.
Try:
body { background:url(../images/kw4.jpeg) no-repeat;}
I'm specifying a color hex code as the background-color of a really long div. However, i'd like this color to be only repeated horizontally, from left to right, in the first part of the and not go down any further.
Can that be done using background-repeat:repeat-y or is there another method?
Colors have no height...they just exist, without dimensions. If you want a visual distinction between your background color and the rest of the document, you'll need to use a solid image as your background-image:
div.className {
background-image:url("images/background.jpg");
background-position:left top;
background-repeat:repeat-x; // Causes repeat from left-to-right only
}
Do you mean repeating background color or an image? I assume an image becaues repeating a background color makes no sense. And yes this is the correct way:
#mydiv {
background-image: url(images/background.png);
background-repeat: repeat-x;
}
The background-repeat CSS property defines how background images are repeated. A background image can be repeated along the horizontal axis, the vertical axis, both, or not repeated at all. When the repetition of the image tiles doesn't let them exactly cover the background, the way adjustments are done can be controlled by the author: by default, the last image is clipped, but the different tiles can instead be re-sized, or space can be inserted between the tiles.
http://www.handycss.com/how/how-to-repeat-a-background-image-horizontally-with-css/
You can achieve this without a file when creating an 1px image and put it into your CSS encoded as base64, or by using multiple html elements and positioning. You can not specify a background size for a plain color defined in pure CSS (without using the image trick) at this time.
Also see Is embedding background image data into CSS as Base64 good or bad practice?