Generic-blog-header.jpg

How To Edit Your Images With HTML & CSS

Keep up with the very latest developments in the digital marketing world

By Jade Hark
on 9/1/15

When it comes to adding images to a CMS sometimes the WYSIWYG (what you see is what you get) doesn't want to play ball. With our HTML and CSS short cuts below, you can amend your images without the need for an image editing software package such as Adobe Photoshop or Illustrator. You can also add some HTML to turn the images into buttons and add meta data for better SEO.

Tip:When using a CMS make sure you use the 'HTML' or 'Text' editor to add the code and add the CSS code to the appropriate .css file.

Link To Image


<img src="example.png">


 

Give Your Image A Name


<img src="example.png" alt="Specifies an alternate text for an image">


 

Turn An Image Into A Link


<a href="www.url.com"><img src="example.png" alt="Image Button"></a>


 

Change The Size


<img src="example.png" alt="Change Size"width="150px" height="100px">


 

Add A Border


 

Solid Border

p.img {

border-style: solid;
border-width: 5px;
}

 

Dashed Border

p.img {

border-style: dashed;
border-width: 5px;

}

 

Dotted Border

p.img {

border-style: dotted;
border-width: 5px;

}

Define Side

p.img {

border-top-style: dotted;
border-right-style: dashed;
border-bottom-style: dotted;
border-left-style: dashed;

}


 

Align Image


 

Right

<img src="example.png" alt="Example Right Align" align="right">

 

Left

<img src="example.png" alt="Example Left Align" align="left">

 

Middle

<img src="example.png" alt="Example Middle Align" align="middle">

 

Top

<img src="example.png" alt="Example Top Align" align="top">

 

Bottom

<img src="example.png" alt="Example Bottom Align" align="bottom">


 

 

Create CSS Shapes


 

Square

#square {

width: 100px;

height: 100px;

background: blue;

}

Circle

#circle {

border-radius: 50%;

width: 200px;

height: 200px;

}

Rectangle

#square {

width: 100px;

height: 200px;

background: blue;

}

Curved Corners

#curved {

border-radius: 5%;

width: 300px;

height: 300px;

}


 

Background Image


 

#background {

background-image: url("image.gif");

}


 

Float Text Over Image


 

The HTML

<div class="image">

<img src="sample.png">

<div class="text">

<h2>Some text</h2>

</div>

</div>

 

The CSS

.image {

position: relative;

}

 

h2 {

position: absolute;

top: 150px;

left: 0;

width: 100%;

margin: auto;

width: 200px;

height: 50px;

}


tips and tricks CTA

Comments