Boostrap: Add image in DIV via CSS

I am working on a project that is very extensive in terms of HTML pages, but the elements are the same. I wanted to get all the images to be called from the CSS files, just in case there is an image change, I only have to go back and change it in the css and not in 100+ HTML pages.

My problem is having the images display. Section 2 image is to be the full height of the section it is nested in, but that is not happening either.

Here the code:

<!-- Section 1 with div--> <div class="lightyellow section"> <div class="container"> <div class="row clearfix"> <div class="col-md-6 column img-responsive pull-right"> <div class="in-sch-section1"></div> </div> <div class="col-sm-6 column"> <h2>Reduce Scheduling Phone Calls</h2> <p>With , your employees can check their schedules, request time off and swap shifts withouto call you.</p> <a href="features.aspx#section3" class="btn"> Learn More</a> </div> </div> </div> </div> <!-- Section 2 --> <div class="section"> <div class="container"> <div class="row"> <div class="col-sm-6"> <h2>Focustomers Insf Schedules</h2> <p>Create an to repeat daily, weekly or monthly, or let our auto-schedule tool do the work for you. The auto-scheduler creates random schedules based uponets.</p> <a href="features.aspx#section2" class="btn">Learn More</a> </div> <div class="col-sm-6"> <div class="in-sch-section2"></div> </div> </div><!-- /.row--> </div> </div>

and here is the idea how section 2 is to look like: Boostrap: Add image in DIV via CSS


I only had to read this far:

I only have to go back and change it in the css and not in 100+ HTML pages.

To know you're using the wrong solution, static html sites should be at most 10-20 pages and even that's pushing it. The minute you go over that there's no point in doing things that way anymore.

You need a CMS.


I wanted to get all the images to be called from the CSS files, just in case there is an image change

This makes no sense, if there is an image change you'll still have to go through all 100+ of your html files and change the css filename to ensure the browser updates the cache.

You need a server language at the very least (even if you're not using a database) to do the job properly.

Using CSS to do this is certainly not the best way to do this but it can be done.

Your issue here is that you need to set the width and height of the div you're using the display the image since an empty div is 0px tall and 0px wide.

.example {
background-image: url(path/to/image);
background-size: cover;
background-repeat: none;
width: 100px;
height: 100px;

EDIT: I should add that using the wrapper class img-responsive won't do anything since .img-responsive manipulate the <img> element, not the background of a <div>

Category:html Time:2018-12-05 Views:1

Related post

  • image alt attribute via css style sheet 2011-09-21

    Method 1: Traditionally I would include an image like this: <img src="image.png" alt="image" /> And the alt attribute would be in their for 2 reasons: Help Visitors with an image SEO purposes. So bots and crawlers know what an image is, i.e. ke

  • How to code the larger images than div with css 2011-03-07

    i want to place a larger image than box on my site design (look at the link for image), its a part of my site design. i wants to use css method. iam now using dreaweaver and i want to code these image, please help me. The size of white bg area is 737

  • Better add images through html or css? 2011-07-12

    Better add images through HTML and determine alt tags, or add through CSS with the text-indent: -9999px (or similar) property? Or is there no difference? Does search engines take text-indent: -9999px property as a normal way of doing things? Cause wi

  • Resize background image in div using css 2011-05-17

    This question already has an answer here: Set size on background image with CSS? 17 answers Below css sets an individual background on two divs; the images repeat themselves if they do not fit into the div size. How can I stretch the images using css

  • Add image to link with CSS 2011-06-24

    I have some URLs to which I want to add the same image. I've got the following code: a.linkArrow { background: transparent url('../images/abc.png') no-repeat center right; padding-right: 60px; } And a link example: <a class="inkArrow" href="#abc"

  • add image to div in code behind 2012-02-28

    Is there any way to add an image that is loaded from db to a div that already exist in aspx file e.g. if I have the following : <div id="dp" class="red"> </div> I cannot use runat=server as my jquery breaks. so I was thinking to somehow f

  • Can not add image inside SVG via jQuery: tag becomes 2012-04-21

    I want to add items in an SVG via jQuery. I can well insert tags such as <rect /> or <text /> but I can not insert images with the tag <image />. This tag becomes <img /> automatically, which can not display an image in SVG: h

  • jquery add images to div based on input field 2013-07-11

    I'm trying to add an image 'x' number of times into a div, based on the value of a particular input field. As the number increases or decreases, I need the images to appear/disappear. Think I'm way off on this, but here's where I'm at: for(i=0; i<

  • Showing Div via CSS selector within a UL 2011-01-19

    I want to build CSS drop down menus. I want to solve the problem of too long drop down items in UL. So I want to use DIV within a UL. If you run this example, heading 3 will show you drop down UL items. I want the same for Heading 2 link. Because I p

  • JQuery add Image to Div 2012-04-18

    I tried to create a plugin for jQuery, but there is a problem. This is the .html: and this is the .js file: I want 4 arrows in a div. Top Middle Right Middle Bottom Middle Left Middle If it's

  • Issues with WIDTH and HEIGHT percentages in a DIV via CSS (firefox doesn't work) 2012-04-22

    My brain is overflow about this issue, so let me share my frustration in order to look for someone having the same experience and, luckily, finding a solution. The thing is the following: In chrome, percentages work fine, b

  • Surrounding a ValidationSummary with a box via CSS 2009-06-02

    By default Html.ValidationSummary() produces HTML like this: <span class="validation-summary-errors">There were some errors...</span> <ul class="validation-summary-errors"> <li>First Name too long</li> <li>Invalid

  • Add image to collapsable content header 2011-05-26

    I'm following the collapsible content doc at - Is there a method of adding an image to the right, within the header field (in code below the header field is referenced by 'Te

  • grayscale in chrome via css 2012-01-15

    Is there a way to make a grayscale image in chrome via css? I have tried this but doesn't work on latest version of chrome --------------Solutions------------- support for native CSS filters in webkit has been added from the current version 19.0.1084

  • Add image to left of text via css 2009-04-09

    How can I add an image to some text via css? I've got this: <span class="create">Create something</span> and I want to add a 16x16 image to the left of that by using css. Is this possible or should i just manually add this image like so:

  • Replace Unavailable Images via CSS? 2008-11-04

    Is it possible to replace the standard broken image via CSS or using another technique? All my images are the same size and my have transparency. I've tried to wrap all images with a div's background: <div class="no_broken"> <img src="http:/

  • Displaying CSS images in div updated by Ajax 2009-03-11

    I wonder if anyone can help. An HTML div in a page of mine contains a tree control which is shown or hidden depending upon a button pressed by a user. The button triggers an Ajax event which sets a variable on the server to show or hide the tree so t

  • Add a tint/color to a submit button in IE8 via CSS while retaining "glassy" look? 2011-05-02

    I'm writing a web app. It's only ever going to be used with IE8, so I'm not concerned with the behavior of any other browsers here. So: I know how to custom-style a button using CSS properties e.g. background-color, border, and so on. However, when y

  • Add image on top of another based on CSS class 2011-06-06

    I have a bunch of img tags on one of the pages in my site. I want to be able to add a custom image on top of a few of these images based on the css class applied to them So in case of the statements below <img src="image_path"/> <img class="

Copyright (C), All Rights Reserved.

processed in 1.791 (s). 15 q(s)