How to get a zoomed out background image?


Tags: html,css

Problem :

So on my page here: dunnrite.co.uk/frame2 you will find under the "text design" header some patterns beneath the 5 solid blocks of colour. They are set as background images for divs. The problem is because I want those divs so small it clips a load off of the original image. How do I get it so that the image shown is more zoomed out to show off the pattern more?

My css was just

background-image:url("Images/pattern12.jpg");

Thanks,

Jonathan



Solution :

Use the background-size CSS property, and probably you want to use the cover value, which ensures that the background completely covers your container, without distorting the image (if the aspect ratio differs, then clipping will occur).

You can also specify an explicit size for your background image, for example 45px as in your case.

The documentation for background-size can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size


    CSS Howto..

    How to scroll the fixed content in CSS and HTML

    How to input block of text next to Font Awesome icon in CSS?

    How to change menu from on hover to on click

    How to make links work, regardless of location in directory structure?

    How to target images with dynamically generated ids with CSS

    How to add CSS files for different platform devices? [closed]

    How to make three columns all the full height of the page?

    How do I remove this unwanted space which seems to be background repeating HTML/CSS

    How to vertical-align text on this input box for IE

    How to make the divider between two tbody elements moveable

    How to swap two button elements using float in CSS

    How to make the width of parent div equal to the width of child image, and height of child image to height of the parent div using CSS only

    How to avoid CSS interference in an HTML page

    How to get CSS height value (rather than calculated height) in jQuery

    How to concat js/css files and replace in html using gulp?

    How to make text appear when input box is active

    how to set background-image to pseudo element?

    How to apply CSS changes for the last

    element of the 3rd div class span8

    How to use CSS position sticky to keep a sidebar visible with Bootstrap 4

    How to fix this css error in IE7 and lower?

    How to manage multi tenant web portal css using Asp.Net MVC

    CSS: How to refer to a tag

    css - how to add another div above one with 2 colums layout?

    How to make corners of progress bar round in css

    How can I prevent styles from applying to certain HTML snippets?

    How to Keep CSS Background Image on top of all divs(breadcrumb arrows)?

    How To Move A DIV Element A Little Towards The Top

    How to make circles repeat in the background of an element in full CSS?

    How to add custom css/js to just one page in WordPress?

    How to put bootstrap glow (used in the 'form-control' CSS class) on a div?