Delete background when the user executes the script


I'm trying to make a "dynamic" background, the idea is:

The index.html has to have a background, this background must have an image, like a logo. This logo must appear until the user tries to navigate and access a link, this link will call an internal script that will load a content within the div result.

The problem I can not make this happen, until now I get to the vice versa, but of course not what I'm looking for.

Here is the html code.


body {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
	background-image: url("imagenes/logo.jpg");
	background-size: 25%;
    background-repeat: no-repeat;
    background-attachment: fixed;
   	background-position: center; 
	border-style: solid none none none;

<div class="navigation-wrapper">
  <div class="container">
    <div class="navigation">
      <div id="main-menu-container">
        <div id="main-menu" class="nav">
          <li class="menuparent">
            <ul class="sub-menu">
              <li><a id="page7">First option, same block</a></li>
              <li><a id="page9">Second option, same block</a></li>
              <li><a id="page10">Third option, same block</a></li>

<!-- El Script -->

<div id="result">
    <script src="./docu2_files/jquery.js" type="text/javascript">
asked by José Vieiros 28.02.2017 в 23:37

2 answers


If you want to make a change in the css of an element with a jQuery event, it's more than enough.

    $("#elementoAlQueLeQuieresCambiarElBackground").css("background", "red"); //Hará que cuando des clic en el elemento que dispara el evento (puedes ser cualquiera, digamos un li) el background de tu elemento cambiará a colo rojo.
answered by 28.02.2017 в 23:50

If I understood correctly, this could be one of several ways to do it, using jQuery.

HTML and CSS have to adapt it to your needs ...


$( "#clickme" ).click(function() { 
<!--Código CSS:-->

.mainPage {
	width: 100%;
	float: left;

.main-content {
	background:  url('')
		no-repeat center;
	width: 600px;
	height: 450px;
	margin: 0 auto;

.main-content.hide-bg {
    background: none;

.text-content {
    padding-top: 50px;
<!--Código HTML:-->
<script   src=""   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
	<div class="mainPage">
		<div class="main-content">
			<div id="clickme" class="text-content">
            <li><a href="#">Uno</a></li>
            <li><a href="#">Dos</a></li>
            <li><a href="#">Tres</a></li>

<!--Código jQuery (librería Javascript):

Simplemente, al hacer click, se agrega la clase 'hide-bg' a la clase 'main-content', que ejecuta 'background: none;', ocultando la imagen de fondo.-->
answered by 01.03.2017 в 06:24