Full screen background image when hovering over link (CSS)

• 

  jeppependrup · Member · Jun 5, 2017 at 4:10 pm

  • Copy link
  • Add topic to favorites

  Hello i’m trying to get a fullscreen background image to appear when hovering over a link, using CSS only.

  It’s kind of working – when i hover over the image appears as it should, but the link(text) link jumps. And this should remain steady.

  I’m pretty new to this CSS but have been playing around with a bunch of different solutions, and this is the closest i’ve been to getting it to work.

  My code looks as follows:

  .gdfb a:hover {

  background-image: url(http://www.jeppependrup.com/wp-
  content/uploads/2016/06/hum7.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  background-position: 50% 50%;
  height: 100%;
  width; 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: “”;
  z-index:0;
  display: block;
  }

  Any help is greatly appreciated.

• 

  samuelonwuegbuziegeneral · Member · Jun 5, 2017 at 4:33 pm

  • Copy link

  .gdfb a:hover {

  background-image: url(http://www.jeppependrup.com/wp-
  content/uploads/2016/06/hum7.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  background-position: 50% 50%;
  height: 100%;
  width; 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: “”;
  z-index:0;
  display: block;
  }

• 

  thesacredpath · Member · Jun 5, 2017 at 8:36 pm

  • Copy link

  Hi there, http://www.jeppependrup.com is not hosted here at WordPress.com, and the site associated with your username appears to not be in use as it has no content.

  Can you verify the link to the site you are wanting help with?

  If it is the site I referenced above, I would suggest asking for help from the theme and/or plugin author directly or ask in the volunteer-based WordPress.org forums.

  The differences between WordPress.com and WordPress.org.