I'm getting a problem in html and css,
I used a bg image for my popup window whose size is 500px width and 400px height;
having a scrollable text in it. but problem is that if i reduce a size of browser it get distorted. Please help me if i can make it scalable background and according to that text as per browser size.
Thanks
Mayur Mate
You cannot scale a background if you defined it as part of your CSS without using some JS. In the example below, the black part of the background would scale/resize with the browser window but the image would not; the img would just happily sit # top:0, left:0, render 1:1 and laugh at you.
/* Black will scale, images does not */
#someDiv {
display:block;
width:100%;
height:100%;
background:#000 url(someImage.jpg) 0 0 no-repeat;
}
If you need to have your background image in your CSS for whatever reason, then read this http://css-tricks.com/perfect-full-page-background-image/ for how to manage scaling CSS backgrounds w/ JS
or
If you defined your background as an img then you have a better chance and you don't even need to use JS (although you probably should if you want to maintain ratio/scale).
Related
I work with a survey platform and in this survey platform I am using a pre-defined template for my survey. The platform allows for CSS "modifications" and I'm trying to get the header image quality to keep from reducing. The image is uploaded as 1170*295 but needs to be displayed as 760*192.
The platform offers a simple image header uploading option but only for a certain size. My image has a lower "height" than their standard.
Things like image-rendering: crisp-edges; (or -webkit-optimize-contrast) are not doing anything. The "end text" displays in blue color (yes, I am a complete beginner and programming in any form is not part of my job).
Header image
div.questionnaire-header {
background: url("/images/uploaded/ANFCZ1FSC5C2?width=760&height=192") no-repeat center left;
}
I hope the header image is displayed with clear, crisp text and not blurry.
Set the background-size property to 100% so our image fills the image element. Set the background-position property to 50% 50% to align the background image within the image element.
Your image is stretching to meet the size of the header. There's no real easy way to upscale an image in css and retain quality. Either change the width of the header to 760px or find an image larger than 1170 x 295
Set the background-size property to 100% of your image to fills the image element.
I have the following:
<div style="container;background-image:url('/images/football.jpg');background-size:100% 100%;">
I would like to manually adjust the width and height of the image. I currently have it covering the full width of the div, but not the full height. Is there a way to manually adjust the size in percentage form while maintaining no-repeat of image.
As mentioned
"background-size:"
Is what you are after however I thought I'd just add a little bit of helpful advice and point you towards W3schools.
http://www.w3schools.com/cssref/css3_pr_background-size.asp
I only recently got through web development at Uni and W3schools was the single most useful source of information I had access to (don't tell my lecturer that). If you get in the habit of looking there first it'll help you out a bunch.
Also might be worth learning how to use external style sheets and linking them into your HTML.
Hope this helps !
background-size: 100%;
will adjust the image proportionally to 100% width of the background area.
If your image size is less then background area then use
background-size:cover;
to stretch it so that the background area is completely covered by the background image.
If your image size is greator then background area then use
background-size:contain;
to shrink it so that the background image is completely fit in the background area.
If I want to design a background for a website using photoshop, what image size should I make ? I want to make a gradient background for my web-app but I don't the specifications to follow.
Take a look at w3schools - css - background. You need to use background-repeat, otherwise you will be forcing the users to download a huge image. So make your gradient of any size, then crop a piece off that is the same height, but a small width (< 10 pixels). Use this as your background with the css background-repeat: repeat-x;.
Use Patterns or Gradients for a good look on all screen resolutions and then, in CSS use
background-repeat:repeat;
You should set the background's width to 5px and the height very long, and set your css to background-reapeat: repeat-x; background: url(your image url here) fixed This is if you have a vertical gradient, if you have a horizontal gradient, it is just vice-versa.
What is the best way to get a smaller version of an image I want to use onto a webpage, but still allow the person to view the full image if they click "view image"? This question could really be broken down into two parts:
Say my image is 900x900px: Is there a way I can display that image at a much smaller size, like 100x100px (so that the browser does not have to load the entire 900px image) but allow the person to see full size image if they click "view image"?
Additionally, what is the best way to take the 900px image, and display it at only 100px? Assuming I can't do this ahead of time with photo editing software, should I use the height and width tags in HTML or in CSS? (It seems like they both resize the image (scale) rather than crop). Thanks
With the usual approach to use the heightand width attributes, the whole image still has to be transferred to the browser.
So if you add a link somewhere (the image itself could be the link), the user is still able to access the complete (900 x 900 px) image.
Regarding image cropping: There is some trickery you can use as outlined in this SO answer.
JsFiddle Demo 1 (the image itself is used as a link to the original full-sized image)
JsFiddle Demo 2 (using the first demo as a base, but this time cropped the image)
Easiest way is to use it as a background to a div and then use the background-sizeattribute. An example would be what I did with my website.
<div id="image"
style="background-image:url(images/Greensburg-Commons-Oblique2.jpg);
background-position:20% 20%;
background-size:600px 800px;">
</div>
Using this method, I was able to take a 3200x2400 photo and scale it down to 800x600 photo. Plus, In my opinion, it's a lot easier to style a div with a background photo than just a plain image and I feel it just does more. Just so you know, background-position changes what part of the scaled in photo you show :)
<div id="image"
style="background-image:url(images/Greensburg-Commons-Oblique2.jpg);
background-size:100% 100%;">
</div>
Also, you could change the background size to 100% by 100% and that way the background will display the full image all the time and will automatically scale down as your window size changes or screen size :). Best for fluid layouts.
well you can set the image as a background of a div and then set the background-size property
#yourDiv{
width:100 px;
height:100 px;
background:url('path/to/your/image');
background-size: 100px 100px;
}
you could set different properties for :hover but you'd need to use javascript to change the properties onclick
You can use a lightbox or with just CSS, but it will resize the page. Now this is a very simple example so don't expect a beautiful display.
HTML
<img src="img.png" class="resize">
CSS
.resize {
width:100px;
height:100px;
}
.resize:hover {
height:900px;
width:900px;
}
Now personally I would use a javascript or just a lightbox. It will look much better right out of the box with minimal adjustments. Just my 2 cents.
I'm working on a website with a em-based layout (so it can stretch and compress gracefully when users increase or decrease font size). This site has a header that should be displayed across all pages. I have a "header" div in all pages, and the site-wide css file includes the code:
#header
{
width: 50em;
height: 6em;
margin-bottom: .5em;
background: url("/IMAGES/header.png");
}
The problem is that this doesn't really stretch gracefully. When text size increase, the height and width change, but **the image doesn't increase in size; it simply repeats*.*
How can I make my image stretch and squish, instead of repeating or getting cut off? (I'd like a css-based solution if possible... I've got some html ideas in store, already).
There is no way to use css to strech a background image. You would have to use javascript or something similar. However, if you have an image that doesn't need to be repeated (e.g. blends into the background), you could do something like this:
background-position: center center;
background-repeat: no-repeat;
Addendum: The position has the following format: <top|center|bottom|xpos> <left|center|right|ypos>
where xpos and ypos can be given in the regular fashion (em, px, %, etc...).
The only way I've ever found is:
Set background of #header to bgcolor of header image.
Place new div inside #header
Split header image into 2
Set left half of new image as #header background aligned-left
Set right half of new image as #header.div background aligned-right
Of course that's only going to work with appropriate images though.
I'm pretty sure you can't change the scaling of background images. If your header.png file was included as an img tag, then you could set its height and width to be a number of ems and the browser would resize it (usually making it look like crap though).
Remember as well that pretty much all the modern browsers do page zooming these days, which will scale everything up without changing your layout too much. Perhaps tell your users to use that feature?
#Pianosaurus, I think your idea may be the simplest, although limited. Simply, don't stretch the image, but make sure it looks good when it's not stretched (center it, and don't let it repeat). Also, if you use a fair amount of padding at the edges of your header image, sizing the page down wouldn't cause such big problems, either.