I am a newbie to CSS. My problem is as follows:
I have 3 sections with 2 columns in each. When I view it on mobile, it does stack correctly, but the image height is very low.
My image is set as a background in the column and set to cover.
What CSS can I use and where do I add the class once created?
Damn...I must sound so dumb.
Hope you lovely people know what I mean!
Related
I have a 5 column responsive layout for a gallery page. I did not code it myself, having found the code for exactly what I wanted somewhere on line. My coding skills and understanding of CSS positioning are evolving, to put it nicely.
It works well until I zoom an image. The image zooms properly, but the right edge is showing as "under" the image to the zoomed image's right.
Looking for the answer I found that the container must have a relative position and the image to have an absolute position for z-factor to work (or so I understood what I read). When I set the image position to absolute, each image takes up the entire screen. I tried a "clear:both" on the hover property to no avail.
The problem exists in any screen width from 550px up - below that the display is single column.
Both the code and the on-page css is valid. Link is http://www.artfromny.com/gallery2.html
Any help appreciated; prefer no java solutions since I barely understand the basic concept of it.
Thanks in advance to all of you who spend so much time helping others get the hang of coding. The last language that I truly understood and used properly was dBase iii so I am kind of struggling here :)
Art
I'm totally new to CSS3 and I am having trouble with images...
In the desktop web it's working fine with big pictures and texts about 1/10 its height
but on mobile devices the images are too big to be displayed and the texts look so small since the screen is zoomed out.
So I want the picture to be cropped at sides keeping the height as original.
I'm using bootstrap so it'd be better if there was a fancy way to deal it with bootstrap classes..
sorry for the easy and possibly duplicate question I couldn't find one though
Since you are using bootstrap. there is a class in bootstrap.css called
".img-responsive"
I would suggest you to add this class to your img tag
I'm trying to set up a Bootstrap 3 carousel to show 3 images per active slide, I want the next and previous images to be truncated but the centre image full width, similar to this example: https://thescene.com/.
I've played around with this for quite a while but can't seem to get the truncated effect? My initial idea is to have the containing div full width to show all 3 images in full with an overflow:hidden property to get the effect, but the carousel itself needs to be 1280px wide. Codeply is here: http://www.codeply.com/go/6eBfBskTsV
Why not grab one online? This component seems has a partial nearby image effect...
http://www.jssor.com/index.html
The bootstrap carousel is just a simple implementation rather than a universal solution, which means it can be cumbersome to tweak to achieve some complicated presentation. I guess unless you are just practising your skills, you won't like to make one by yourself.
Does anyone know of a method where I could have a CSS rollover image with a percentage width so that it scales with the size of the page?
I presume that I wouldnt be able to use the method shown here http://www.vision.to/css-only-single-image-fast-rollover.php because that sets the image sprite as the background image.
The only other CSS method I have seen was here: http://thefiles.macadamian.com/2008/06/pure-css-image-rollover-without.html
I like this method but was wondering if it were possible to use one image sprite as opposed to having to load the images separately.
Sorry if I sound very vague, whenever I read these questions I always think the people writing them dont describe what they mean properly and now I've come to do it I'm no better myself haha.
Thanks for any help :)
I don't see how you could do this with sprites. They're done by setting a large image as a background for an element, usually a DIV, and then altering the position so that only the desired portion of the image is shown. Different DIVs can show different parts of the image by altering the background image position.
However, you can't scale background images. They're always shown at 1:1. You can make them repeat within the element, or not, but you can't scale them, so the sprite idea is out.
Doing it with separate images is fairly straightforward, as indicated by the link you posted.
Preloading an image for rollover is pretty simple. Just include an image tag with the CSS set to hide the image:
<img src='myrolloverimage.jpg' style='visibility:hidden; display:none;' />
If you don't need to support IE8 and earlier, you could use the CSS3 background-size property with percentage values.
As with foreground images, a sprite file most likely wouldn't be a reasonable option. There are added complexities with sprite files when the image is scaled. The background-position is based on the scaled size of the image, and getting an accurate position using percentage values is problematic.
I am trying to implement a fixed background for a website like one over here. Searching around for it told me that I can use background: fixed or background-attachment properties for this.
My problem is the image which will be used as background. I am thinking about following issues:
What should be image size?
how will it repeat when browser window size is very large? for big 27" monitors out there?
Can somebody guide me on these points?
Regards
Vikram
That is not a single background image. Its mostly a bgcolor, except for the side clouds. Using a single large image as a background will dramatically slow down your load time.
There's no specific guideline. You need to make the image as large as necessary to satisfy the requirements of the design. If you want someone with a maximized browser window on a 30-inch display to see a single unbroken non-repeating background image, then yes, you'll need quite a large image. It won't perform well.
The Twitter example is a wide but short image, set to repeat along its x-axis. It's wide at 2247 pixels, but perhaps unnecessarily so: it actually appears to be a fixed pattern that repeats horizontally four times within that 2247 pixel image. Nonetheless, you get the idea: make an image that blends gracefully into itself at its edges for seamless tiling, and/or blends into a fixed background color. Position and repeat it as needed, set the background-color of the page, and you're done.