Contact

Keep up to date with our latest Digital Insights

Want to keep up with the very latest developments in the digital marketing world? Of course you do…

How To Edit Your Images With HTML & CSS

Posted in Return

09/01/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

Leave a Comment

Your email address will not be published.