How to Center an Image in CSS Very Easily

center image in css

There are few pointers to center an image in CSS.

  • First, make sure that the parent element of the image has its width set.
  • Second, the image should not be wider than its parent element, that’s pretty obvious.

See also:  How To Center A Div Inside A Div Easily

Center and Image in CSS horizontally

Images are the same as divs, you can use the text-align into its parent element but not the margin: 0 auto alone on the image.
To center image in div, set a width of the div then add margin:0 auto and display: block into the image in CSS.

The HTML code:


<div class=wrapper>
 <img src="http://22bulbjungle.com/wp-content/uploads/2017/04/rabbit_in_hand.jpg" />
</div>

The CSS styles:

.wrapper{
 width: 100%;
 height: 300px; 
 border: 2px solid #93c504;
}
img{
 max-width: 250px;
 display: block;
 margin: 0 auto
}

This will result into an image centered horizontally:

center-image_margin_0_auto

 

See the jsfiddle:

Make sure you have a smaller image width than the parent element.

The margin’s first value 0 was for the top and bottom margin. While the second is for left and right margin.

You can also set margin-left: auto and margin-right: auto on the image in CSS.

Center an Image in CSS horizontally and vertically

We will going to use the span element to guide our image  making it center. Setting an image with margin and text-alignment could not make our image center align.

The HTML code:


<div class=wrapper>
 <span class="for-image"></span>
 <img src="http://22bulbjungle.com/wp-content/uploads/2017/04/rabbit_in_hand.jpg" />
</div>

The CSS styles:


.wrapper {
  width: 100%;
  height: 300px; 
  border: 2px solid #93c504;
  text-align: center
}

.for-image {
  height: 100%;
  display: inline-block;
  vertical-align: middle
}

img {
  max-width: 200px;
  height: auto;
  background: #3A6F9A;
  vertical-align: middle
}

center-image_margin_auto

Responsive design images

Creating a responsive design image is very useful for mobile devices.

Responsive image will automatically scale down and adjust to the width of the device.

To create a responsive design image, you just set a max-width: 100%; and height: auto; into the images.

The max-width: 100%; means the image’s width will cover all its parent’s width. You can also set a natural image width(full resolution width of the image) to the max-width property so it will not be basing upon its parent element’s width.

The height: auto; makes the image height and width proportional. As a result, it would not stretch.

What happens if you will not set a height: auto; is, the image’s original height will still be the same while the width is scaling according to the device’s width, so it will be non-proportional.

Background Image Color Overlay | Create a Filter Look with CSS

css_color_filter_overlay

To add a color overlay to the background image, I am going to use CSS.

First of all, adding a CSS background image color overlay is the most dynamic way of creating tinted web page images. It became popular to many websites which appear in homepage as banners.

Example:

css-background-image-color-overlay2

The great thing about adding background image color overlay is that you can just change any image (normal image without filter) dynamically and publish it on your website with filter, thanks to CSS.

So, how to do it?

Watch the video or continue reading.

See also:

Add a background property

(Yes not a background-image or background-color).

Within the background property, I add a linear gradient and a URL to the image.  I am using a linear-gradient background with transparency.

 background:
   linear-gradient(
   rgba (255, 255, 255, 0.5), 
   rgba (255, 255, 255, 0.5)
   ), 
   url(image.jpg)

In one CSS property, I need to set two backgrounds. The first one is the linear-gradient color and the second is the actual image.

Because I need to add transparency for the background color opacity, I will define RGBA inside the linear gradient.

Example:

linear-gradient(
   rgba (255, 255, 255, 0.5), 
   rgba (255, 255, 255, 0.5)
   );

The RGBA is an RGB color with an alpha channel. The alpha channel must be set between 0.0 to 1.0. It is the last parameter of the RGBA. The RGBA parameters are composed of red, green, blue, alpha.

Example: rgba (255, 255, 255, 0.5)

How to choose and get a color?

To make it easier for you to choose the color, create your web page document copying the code from here. Open it in the browser.

Developer tool in your browser is your friend. Right-click and inspect your web page (or CTRL+SHIFT+I).

On your div with the background style, click on the colored square or circle and a color picker will appear. Choose your color by dragging into the palette.

color-box-22bulbjungle-css-background-image-color-overlay2

Change the opacity of the color you’ve picked, that is important so we can mimic the overlay or color filter effect in photoshop with our background image.

You can also use CSS Gradient Generator from sites like colorzillacssmatic, or cssportal.

See the jsfiddle:

Use the background-blend-mode

Are you familiar with Photoshop blend modes?

Well, I can also blend our background but with CSS.

I can also use the linear-gradient without the transparency and add a background-blend-mode: soft-light;

The CSS code should look like this:


.block {
 height: 350px;
 background: linear-gradient(yellow, yellow), url(image.jpg);
 background-size: cover;
 text-align: center;
 background-blend-mode: soft-light;
}

As a result, the image and the color blended together in soft-light. Unlike the other way in which I can adjust the opacity.



You can experiment by adding different value into the background-blend-mode property.

background-blend-mode values include:

  • normal
  • multiply
  • screen
  • overlay
  • darken
  • lighten
  • color-dodge
  • saturation
  • color
  • luminosity

CSS Background image color overlay in hover

Add a background image color overlay if the user hovers over the image.

In conclusion, adding the color filter effect can be done in two ways. The first is through a background property with the linear gradient and image url.

The other is to add a solid color within the parameter of linear-gradient and add the background-blend-mode property.

Creating a Hero Image with color filter overlay on hover

Hero image is a large website banner image. It is composed of the background image, texts and even a button.

Learn how to create your hero image with CSS background image color overlay by watching the video below:

You can use either of the two techniques to add the effect into your CSS background image.

Disable Right Click with Javascript

Disable right click with javascript

Disable right click to prevent end users the capabilities to inspect, print, or copy.

I do not recommend adding this into your web-pages but here is the tutorial.

Disable right click with javascript

Disable right click and content copying

Preventing the user from copying your content may also be one of the reason why you want to disable the right click function. It may be useless because someone can manage to use the shortcut key Ctrl+C to copy. Using CSS is a better way to prevent the user from copying.

Try to look at the code below and right-click on the result tab.

Find out how to disable a user from copying your texts using CSS:

Just make sure you also disable the right-click function so a user cannot inspect through right-clicking.

Disable right click on images

The major reason to disable the right-click is to prevent the users from inspecting your code. Preventing them also disable them to download images.

Try to look at the code below and see how the JavaScript function is used to disable the right click into images.

Did you know, a user can also get your images through downloading the whole web document?

The document will have the webpage’s HTML, CSS, JS, images and other files that can be viewed without an internet connection. Images inside the downloaded document were the actual image from a live web page.

Another thing, a user can also use the page info feature in firefox browser to find the image by going to the media tab and clicking on the links to preview the image.


The only problem is, a user can disable the JavaScript in the browser. Hence, the script added would not run.

A user can disable JavaScript in Chrome by going to this path: chrome://settings/content .

chrome_content_settings

Under JavaScript, there are two radio options allow and disallow JavaScript.

In Mozilla Firefox, the user can disable JavaScript by going to this path: about:config within the browser.

firefox_about_config

Next, click the button saying “I accept the risk”. Search for JavaScript, then right-click and click on toggle.

This will turn JavaScript into false indicates that it is now disabled.

I would not recommend disabling right-click function but if for some reasons / for debugging purposes etc or even a first steps to protect your own copyright images.