CSS – Rollover

• 

  fairfieldflyfins · Member · May 4, 2015 at 5:09 am

  • Copy link
  • Add topic to favorites

  I am having trouble getting this rollover to work.
  Below is the CSS code in the stylesheet editor:
  #chads-image-swap-1 {
  width: (91);
  height: (39);
  background: url (“https://fairfieldflyfins.files.wordpress.com/2015/05/reg-buttonlit.jpg”);
  }

  #chads-image-swap-1 img:hover {
  opacity: 0;
  }

  This is the html:(http://flyfins.org/css-test/)
  <div id=”chads-image-swap-1″><img id=”swap-1″ src=”https://fairfieldflyfins.files.wordpress.com/2015/05/reg-button3.jpg” alt=”” width=”91″ height=”39″ /></div>

  The blog I need help with is: (visible only to logged in users)

• 

  rachelmcr · Member · May 5, 2015 at 4:25 pm

  • Copy link

  I noticed a couple syntax issues with your CSS code:

  #chads-image-swap-1 {
  width: (91);
  height: (39);
  background: url ("https://fairfieldflyfins.files.wordpress.com/2015/05/reg-buttonlit.jpg");
  }

  When you specify width and height in CSS, you always need to include a unit of measurement like pixels. Here’s an example:

  #example {
  width: 10px;
  height: 10px;
  }

  For the background image, there shouldn’t be a space in between url and the opening parenthesis.

  With those fixes, your CSS will look like this:

  #chads-image-swap-1 {
    width: 91px;
    height: 39px;
    background: url("https://fairfieldflyfins.files.wordpress.com/2015/05/reg-buttonlit.jpg");
  }

  There’s just one more thing, to make your background image fit into the space provided. As it is now, the background image will appear full size, so you’ll just see the top left corner of the image. To fit the whole image in the space provided, you can specify the background-size property like this:

  #chads-image-swap-1 {
    width: 91px;
    height: 39px;
    background: url("https://fairfieldflyfins.files.wordpress.com/2015/05/reg-buttonlit.jpg");
    background-size: contain;
  }

  You can learn more about background images and the background-size property here:

  background-size

  We also have a support page about CSS Basics with some links to other resources that might come in handy for you. :)

• 

  fairfieldflyfins · Member · May 6, 2015 at 2:24 am

  • Copy link

  This worked….Thanks for all the help!! :)